Pregunta:
Fecha: 03-03-2018 22:07:58
(En Español)
el primer <div> se muestra centrado, pero arriba, intento que se muestre centrado tanto vertical como horizontal
y el segundo <div> igual pero debajo del primero, lo que me pasa es que si lo centro texto "Informar" sale centrado, pero las líneas ya no salen a los lados, si no arriba y abajo.
Un saludo.
Votos: 0 - Respuestas: 6 - Vistas: 14 Compartir en: Google Facebook Twitter LinkedIn Link
Centrar <Div> y contenido[Resuelta]
Hola, estoy creando una página para que me muestre un mensaje, pero hay una parte que no consigo centrar, a ver si me podéis ayudar con el código.<!DOCTYPE html> <html lang="es"> <head> <meta charset="UTF-8"> <title>Error</title> <script src="https://code.jquery.com/jquery-2.1.4.js"></script> <style type="text/css"> .texto4{ font-size:45px; text-shadow: 2px 2px 10px black, 0 0 0 white, 0 0 0.2em grey; color: black; margin-top: 0px; margin-bottom: 0px; } .contenedor{ width:500px; height:300px; line-height:300px; border:1px solid; text-align:center; } .contenedor>span { display:inline-block; vertical-align:middle; line-height:normal; } .linea { margin:0px 20px; width:90px; border-top:1px solid #999; position: relative; top:10px; float:left; } .leyenda { font-weight:bold; float:left; } </style> </head> <body> <center> <div class='contenedor'> <span class="texto4">Documento <br> no <br> encontrado</span> </div> <div style="width:400px;margin:auto;"> <div class="linea"> </div> <div class="leyenda">Informar</div> <div class="linea"> </div> </div> </center> </body> </html>
el primer <div> se muestra centrado, pero arriba, intento que se muestre centrado tanto vertical como horizontal
y el segundo <div> igual pero debajo del primero, lo que me pasa es que si lo centro texto "Informar" sale centrado, pero las líneas ya no salen a los lados, si no arriba y abajo.
Un saludo.
Votos: 0 - Respuestas: 6 - Vistas: 14 Compartir en: Google Facebook Twitter LinkedIn Link
Respuestas:
-
Fecha: 04-03-2018 04:28:07 Hola buenos dias, te adjunto el código:
<!DOCTYPE html> <html lang="es"> <head> <meta charset="UTF-8"> <title>Error</title> <script src="https://code.jquery.com/jquery-2.1.4.js"></script> <style type="text/css"> .texto4{ font-size:45px; text-shadow: 2px 2px 10px black, 0 0 0 white, 0 0 0.2em grey; color: black; margin-top: 0px; margin-bottom: 0px; } .contenedor{ width:500px; height:300px; line-height:300px; border:1px solid; text-align:center; } .contenedor>span { display:inline-block; vertical-align:middle; line-height:normal; } .linea { margin:0px 20px; width:28%; border-top:1px solid #999; position: relative; top:15px; float:left; } .contenedor_leyenda{ width:500px; height:40px; line-height:40px; text-align:center; } .leyenda { width: 28%; font-weight:bold; float:left; } </style> </head> <body > <center> <div class='contenedor'> <span class="texto4">Documento <br> no <br> encontrado</span> </div> <div class="contenedor_leyenda"> <div class="linea"> </div> <div class="leyenda">Informar</div> <div class="linea"> </div> </div> </center> </body> </html>
Votos: 2 - Link respuesta -
Fecha: 04-03-2018 08:03:39 Muchas gracias Renny, vi tu mensaje desde el móvil y estaba deseando llegar a casa para probarlo, ahora si sale bien.
Lo dicho, muchas gracias. Votos: 0 - Link respuesta -
-
Fecha: 04-03-2018 09:54:11 Por cierto, un comentario, si usaras bootstrap seria mas sencillo ;) Votos: 1 - Link respuesta
-
Fecha: 05-03-2018 06:53:02 Gracias Renny, de todas formas no creas que me decido a crear paginas web, son cuatro cosas que voy haciendo para hacer algo mas agradable de llevar el trabajo, en cuando a documentación, pero es solo para uso personal.
Salu2. Votos: 0 - Link respuesta -
Para participar activamente de la comunidad primero debes autenticarte, ingresa al sistema.Iniciar Sesión