Alinear contenidos dentro de un div

152

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

Además, como su nombre indica, se usa básicamente para alinear texto. La propiedad de alineación ha quedado en desuso hace mucho tiempo.

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

html css text-align

— Hemanshu Bhojak
fuente

Danos más información por favor? pasado el código que no funciona 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, su pregunta es ambigua.

— levik

216

alinear texto alinea el texto y otro contenido en línea. No alinea elementos secundarios de bloque.

Para hacer eso, desea dar al elemento que desea alineado un ancho, con márgenes 'auto' 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, debe asegurarse de que el Modo de estándares esté activado utilizando un DOCTYPE adecuado.

Si realmente necesita admitir el modo IE5 / Quirks, que en estos días no debería realmente, 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 estilos, pero la versión en línea es ilustrativa).

— bobince
fuente

2

Si no conoce el ancho div, que suele ser el caso, esta solución funciona perfectamente en todos los navegadores: matthewjamestaylor.com/blog/…

— Artem Russakovskii

Usé <div style = "width: 100%; margin: 0 auto;"> Hello </div>

— Aamol

9

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 Mattew James Taylor para obtener una descripción completa.

— Mahdi
fuente

9

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

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

— krithi k
fuente

1

Si bien este fragmento de código puede resolver la pregunta, incluir una explicación realmente ayuda a mejorar la calidad de su publicación. Recuerde que está respondiendo la pregunta para los lectores en el futuro, y que esas personas podrían no conocer los motivos de su sugerencia de código.

— andreas

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

— krithi k el

6

Honestamente, odio todas las soluciones que he visto hasta ahora, y te diré por qué: simplemente no parecen alinearse bien ... así que esto es lo que suelo hacer:

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

Crearé un div de envoltura que tenga una posición absoluta y un valor izquierdo del 50% ... por lo que este div ahora comienza en el medio de la pantalla, y luego resta la mitad de todo el contenido del ancho del div ... y obtengo HERMOSAMENTE escalando contenido ... 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 envoltura y todo el contenido tiene 200px de ancho):

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

EDITAR: Olvidé agregar ... también es posible que desee establecer el ancho: 0px; en este contenedor envolvente para que algunos navegadores no muestren las barras de desplazamiento, y luego puede usar el posicionamiento absoluto para todos los divisores internos.

Esto también funciona INCREÍBLE para alinear verticalmente su contenido y usar top: 50% y margin-top. ¡Salud!

— Alexandru
fuente

2

Aquí hay una técnica que uso 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>

Expandir fragmento

— Sabueso
fuente

2

A continuación se presentan los métodos que siempre me han funcionado.

Al usar el modelo de diseño flexible :

Establezca la visualización del div primario en display: flex;y puede alinear los elementos secundarios dentro del div utilizando justify-content: center;(para alinear los elementos en el eje principal) yalign-items: center; (para alinear los elementos en el eje transversal).

Si tiene más de un elemento secundario y desea controlar la forma en que están organizados (columnas / filas), también puede agregar flex-direction propiedades.

Ejemplo de trabajo:

.parent {
  align-items: center;
  border: 1px solid black;
  display: flex;
  justify-content: center;
  height: 250px;
  width: 250px;
}

.child {
  border: 1px solid black;
  height: 50px;
  width: 50px;
}

<div class="parent">
  <div class="child"></div>
</div>

Expandir fragmento

2. (método anterior) Uso de posición, propiedades de margen y tamaño fijo

Ejemplo de trabajo:

.parent {
  border: 1px solid black;
  height: 250px;
  position: relative;
  width: 250px;
}

.child {
  border: 1px solid black;
  margin: auto;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 50px;
  position: absolute;
  width: 50px;
}

<div class="parent">
  <div class="child"></div>
</div>

Expandir fragmento

— nmak18
fuente

1

Todas las respuestas hablan de alineación horizontal.

Para alinear verticalmente múltiples elementos de contenido, eche 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>

Expandir fragmento

— Nicolas
fuente

-2

Solo otro ejemplo usando HTML y CSS:

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

— Diogo
fuente

27

Nada de lo que escribió es específico de ASP.NET. Es solo HTML y CSS en línea. ¿Querías escribir un control de servidor con propiedades?

— gusano web

1

Fijo. La respuesta ahora menciona las tecnologías correctas.

— jony