Por alguna razón, mis divs no se centrarán horizontalmente en un div que contiene:
.row { width: 100%; margin: 0 auto; } .block { width: 100px; float: left; }
Lorem Ipsum Dolor
Y a veces hay una división div con solo un bloque div en ella. ¿Qué estoy haciendo mal?
Para lograr lo que estás tratando de hacer:
Considere usar display: inline-block
lugar de float
.
Prueba esto:
.row { width: 100%; text-align: center; // center the content of the container } .block { width: 100px; display: inline-block; // display inline with abality to provide width/height }
MANIFESTACIÓN
teniendo margin: 0 auto;
junto con el width: 100%
es inútil porque su elemento ocupará todo el espacio.
float: left
flotarán los elementos a la izquierda, hasta que no quede espacio, por lo tanto irán en una nueva línea. Use display: inline-block
para poder visualizar elementos en línea, pero con la capacidad de proporcionar tamaño (en comparación con la display: inline
donde se ignoran el ancho / alto)
Otro ejemplo de trabajo , usando display: inline-block
y text-align: center
HTML :
Hello World
CSS :
.container { ... } .row { text-align: center; } .btn { display: inline-block; margin-right: 6px; background-color: #EEE; } .clear { clear: both; }
Fiddle: http://jsfiddle.net/fNvgS/
Aunque no cubre esta pregunta (porque quiere alinear los
s dentro del contenedor) pero directamente relacionado: si quisiera alinear solo un div horizontalmente, podría hacer esto:
#MyDIV { display: table; margin: 0 auto; }
Las alineaciones en CSS habían sido una pesadilla. Afortunadamente, W3C introdujo un nuevo estándar en 2009: Flexible Box . Hay un buen tutorial sobre esto aquí . Personalmente, me parece mucho más lógico y más fácil de entender que otros métodos.
.row { width: 100%; display: flex; flex-direction: row; } .block { width: 100px; }
Lorem Ipsum Dolor
Usando FlexBox:
Lorem Ipsum Dolor .row { width: 100%; margin: 0 auto; display: flex; justify-content: center; /* for centering 3 blocks in the center */ /* justify-content: space-between; for space in between */ } .block { width: 100px; }
La última tendencia es usar Flex o CSS Grid en lugar de usar Float. Sin embargo, todavía un 1% de navegadores no son compatibles con Flex. Pero a quien realmente le importan los viejos usuarios de IE de todos modos;)
Fiddle: mira aquí
Si los elementos deben mostrarse en una línea e IE 6/7 no importan, considere usar display: table
y display: table-cell
lugar de float
.
inline-block
conduce a lagunas horizontales entre los elementos y requiere la puesta a cero de esas lagunas. La forma más simple es establecer font-size: 0
para el elemento principal y luego restaurar font-size
de font-size
para los elementos secundarios que tienen display: inline-block
estableciendo su font-size
en un valor px
o rem
.
Intenté la respuesta aceptada, pero finalmente descubrí que:
margin: 0 auto; width: anything less than 100%;
Funciona bien hasta ahora.
He usado estos dos enfoques cuando necesito manejar la alineación div horizontal.
primero ( Alineación del centro usando la propiedad de margen ):
.center-horizontal-align { margin-left: auto; margin-right: auto; width: (less than 100%) or in px }
Establecer los márgenes izquierdo y derecho en automático especifica que deben dividir el margen disponible por igual. La alineación central no tiene efecto si el ancho es 100%.
y el segundo:
.center-horizontal-align { display: table margin-left: auto; margin-right: auto; }
Usar el segundo enfoque es conveniente cuando tiene varios elementos y desea que todos estén centrados en una celda de la tabla (es decir, varios botones en una celda).