Alinear el contenido dentro de un div

StackOverflow https://stackoverflow.com/questions/684634

  •  22-08-2019
  •  | 
  •  

Pregunta

Yo uso de estilos CSS text-align para alinear contenidos dentro de un contenedor en HTML. Esto funciona bien mientras que el contenido es texto o el navegador es Internet Explorer. Pero por lo demás no funciona.

Además, como su nombre indica, se utiliza básicamente para alinear el texto. La propiedad align ya no se utiliza mucho tiempo atrás.

¿Hay alguna otra manera de alinear el contenido en html?

¿Fue útil?

Solución

text-align alinea el texto y el otro contenido en línea. Que no se alinea hijos elemento de bloque.

Para hacer eso, usted quiere dar al elemento que desea alineado una anchura, con ‘auto’ márgenes izquierdo y derecho. 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, es necesario asegurarse de modo de estándares es mediante el uso de un DOCTYPE adecuado.

Si realmente necesita para apoyar IE5 / modo no estándar, que en estos días se debe en realidad no, es posible combinar los dos enfoques diferentes para el centrado: 

<div style="text-align: center">
    <div style="width: 50%; margin: 0 auto; text-align: left">Hello</div>
</div>

(Obviamente, estilos son mejor poner dentro de una hoja de estilo, pero la versión en línea es ilustrativo.)

Otros consejos

Puede hacerlo de esta manera 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%; }

Artem Russakovskii mencionado también, leer el artículo original de Mattew James Taylor para una descripción completa. 

<div class="content">Hello</div>

.content {
    margin-top:auto;
    margin-bottom:auto;
    text-align:center;
}

Sinceramente, no me gusta todas las soluciones que he visto hasta ahora, y te diré por qué: Ellos simplemente no parecen alinearse siempre bien ... Así que aquí es lo que suele hacer:

Yo sé lo que los valores de cada div y sus respectivos márgenes de píxeles mantengo ... así que hacer lo siguiente.

Voy a crear un div contenedor que tiene una posición absoluta y un valor izquierdo de 50% ... así que este div ahora se inicia en el centro de la pantalla, y luego le resto la mitad de todo el contenido del ancho de la div ... y me da bELLAMENTE escala según el contenido ... y creo que esto funciona en todos los navegadores, también. Pruébelo usted mismo (este ejemplo se supone que todo el contenido de su sitio está envuelto en una etiqueta div que utiliza esta clase de contenedor y todo su contenido es 200 píxeles de ancho): 

.wrapper {
    position: absolute;
    left: 50%;
    margin-left: -100px;
}

EDIT: se me olvidó añadir ... es posible que también desee establecer el ancho: 0px; en este div contenedor para algunos navegadores para no mostrar las barras de desplazamiento, y entonces puede usar la colocación absoluta para todos los divs interiores.

Esto también funciona increíble para alinear verticalmente el contenido, así el uso de la parte superior: 50% y el margen superior. Saludos!

Aquí es una técnica que utilizo que ha funcionado bien: 

<div>
    <div style="display: table-cell; width: 100%">&nbsp;</div>
    <div style="display: table-cell; white-space: nowrap;">Something Here</div>
</div>

Todas las respuestas hablan de alineación horizontal.

para la alineación vertical de múltiples elementos de contenido, echar un vistazo a este enfoque: 

<div style="display: flex; align-items: center; width: 200px; height: 140px; padding: 10px 40px; border: solid 1px black;">
    <div>
        <p>Paragraph #1</p>
        <p>Paragraph #2</p>
    </div>
</div>

Sólo otro ejemplo usando HTML y CSS: 

<div style="width: Auto; margin: 0 auto;">Hello</div>
Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top