Alinear contenidos dentro de un div

119

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.Alinear contenidos dentro de un div

También como su nombre lo indica, se usa básicamente para alinear texto. La propiedad de alineación ha quedado obsoleta hace mucho tiempo.

¿Hay alguna otra manera de alinear los contenidos en html?

Fuente

2009-03-26 Hemanshu Bhojak

nos dan más información por favor? más allá del código que no está funcionando en otros navegadores. – Shoban

Debe dar un ejemplo de su marcado para que la gente sepa lo que está tratando de hacer. De lo contrario, tu pregunta es ambigua. – levik

175

text-align alinea texto y otro contenido en línea. No alinea los elementos del bloque niños.

Para hacer eso, desea dar al elemento que desea alinear un ancho, con los márgenes 'automático' 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 que está en Standards Mode 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, los estilos son mejores puesto dentro de una hoja de estilo, pero la versión en línea es ilustrativo)

Fuente

2009-03-26 05:46:21 bobince

Si no conoce el ancho de div, que a menudo es el caso, esta solución funciona perfectamente en todos los navegadores: http://matthewjamestaylor.com/blog/beautiful-css-centsred-menus-no-hacks-full-cross -browser-support –

He utilizado

Hello

– Aamol

Sólo otro ejemplo usando HTML y CSS:.

<div style="width: Auto; margin: 0 auto;">Hello</div>

Fuente

2012-08-17 13:06:10 Diogo

+27

Ninguno de los que ha escrito es específico de ASP.NET. Es solo HTML y CSS en línea. ¿Quiso escribir un control de servidor con propiedades? – webworm

Reparado. La respuesta ahora menciona las tecnologías correctas. – jony

Usted 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%; }

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

Fuente

2012-12-22 19:46:54 Mahdi

Honestamente, 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:

Sé qué valores de píxeles tienen cada div y sus respectivos márgenes ... así que hago lo siguiente.

Crearé un envoltorio div que tenga una posición absoluta y un valor a la izquierda del 50% ... entonces este div ahora comienza en el medio de la pantalla, y luego restamos la mitad de todo el contenido del div de ancho ... y obtengo ESCALO HERMOSO 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 .. .usted también puede querer configurar 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!

Fuente

2013-08-04 18:21:07 Alexandru

que aquí hay 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>

Fuente

2015-06-11 12:00:09 Bloodhound

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

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

Fuente

2016-10-27 15:07:56

Si bien este fragmento de código puede resolver la pregunta, [incluyendo una explicación] (http://meta.stackexchange.com/questions/114762/explaining-entirely-code-based-answers) realmente ayuda a mejorar la calidad de su publicación. Recuerde que usted está respondiendo la pregunta a los lectores en el futuro, y es posible que esas personas no sepan los motivos de su sugerencia de código. – andreas

Lo sentimos, el código anterior alineará un centro de div con el contenido principal –

Alinear contenidos dentro de un div

Respuesta

Cuestiones relacionadas