html - justificar - centrar texto horizontalmente css
Alinear contenidos dentro de un div (6)
Uso css style text-align para alinear los contenidos dentro de un contenedor en HTML. Esto funciona bien mientras el contenido es texto o el navegador es IE. Pero de lo contrario no funciona.
Además, como su nombre lo sugiere, se usa básicamente para alinear el texto. La propiedad de alineación ha quedado obsoleta hace mucho tiempo.
¿Hay alguna otra manera de alinear los contenidos en html?
Aquí hay una técnica que uso que funcionó bien:
<div>
<div style="display: table-cell; width: 100%"> </div>
<div style="display: table-cell; white-space: nowrap;">Something Here</div>
</div>
Honestamente, odio todas las soluciones que he visto hasta ahora, y les diré por qué: simplemente no parecen alinearlo bien ... así que esto es lo que suelo hacer:
Sé qué valores de píxeles tienen cada div y sus respectivos márgenes ... así que hago lo siguiente.
Crearé un div envoltorio que tiene una posición absoluta y un valor de izquierda del 50% ... entonces este div ahora comienza en el medio de la pantalla, y luego restamos la mitad de todo el contenido del ancho del div ... y obtengo un escalado de contenido HERMOSO ... y creo que esto también funciona en todos los navegadores. Pruébelo usted mismo (este ejemplo asume que todo el contenido de su sitio está envuelto en una etiqueta div que usa esta clase de contenedor y que todo el contenido en ella tiene 200 píxeles de ancho):
.wrapper {
position: absolute;
left: 50%;
margin-left: -100px;
}
EDITAR: Olvidé agregar ... es posible que también desee establecer el ancho: 0px; en este envoltorio div para que algunos navegadores no muestren las barras de desplazamiento, y luego puedes usar el posicionamiento absoluto para todos los divs internos.
Esto también funciona ASOMBROSO para alinear verticalmente su contenido también con la parte superior: 50% y margen superior. ¡Aclamaciones!
Puedes hacerlo así también:
HTML
<body>
<div id="wrapper_1">
<div id="container_1"></div>
</div>
</body>
CSS
body { width: 100%; margin: 0; padding: 0; overflow: hidden; }
#wrapper_1 { clear: left; float: left; position: relative; left: 50%; }
#container_1 { display: block; float: left; position: relative; right: 50%; }
Como también mencionó Artem Russakovskii , lea el artículo original de matthewjamestaylor.com/blog/… para una descripción completa.
Solo otro ejemplo usando HTML y CSS:
<div style="width: Auto; margin: 0 auto;">Hello</div>
text-align alinea texto y otro contenido en línea. No alinea los elementos del bloque niños.
Para hacer eso, desea dar un ancho al elemento que desea alinear, con márgenes izquierdos y derechos "automáticos". Esta es la forma compatible con los estándares que funciona en todas partes, excepto IE5.x.
<div style="width: 50%; margin: 0 auto;">Hello</div>
Para que esto funcione en IE6, debe asegurarse de que el Modo de estándares esté activado utilizando un DOCTYPE adecuado.
Si realmente necesita soportar el modo IE5 / Quirks, que actualmente no debería, es posible combinar los dos enfoques diferentes para centrar:
<div style="text-align: center">
<div style="width: 50%; margin: 0 auto; text-align: left">Hello</div>
</div>
(Obviamente, los estilos se colocan mejor dentro de una hoja de estilo, pero la versión en línea es ilustrativa).
<div class="content">Hello</div>
.content {
margin-top:auto;
margin-bottom:auto;
text-align:center;
}