html - texto - Centrando un bloque div sin el ancho
centrar un div (21)
Cuatro maneras de pelar a ese gato:
Botón uno: cualquier tipo de display: block de tipo display: block asumirá el ancho total de los padres. (a menos que se combine con float ). Cierto. Mal ejemplo.
Botón 2: para la display: inline-block conducirá a un ancho automático (en lugar de completo). A continuación, puede centrar utilizando text-align: center en el bloque de ajuste . Probablemente el más fácil, y el más ampliamente compatible, incluso con navegadores "antiguos" ...
.wrapTwo
text-align: center;
.two
display: inline-block; // instantly shrinks width
Botón 3: No hay necesidad de poner nada en la envoltura. Así que quizás esta sea la solución más elegante. También funciona verticalmente. (El soporte del navegador para transtlate es suficientemente bueno (≥IE9) en estos días ...).
position: relative;
display: inline-block; // instantly shrinks width
left: 50%;
transform: translateX(-50%);
Por cierto: también es una excelente forma de centrar verticalmente bloques de altura desconocida (en relación con el posicionamiento absoluto).
Botón 4: Posicionamiento absoluto. Solo asegúrese de reservar suficiente altura en la envoltura, ya que nadie más lo hará (ni clearfix ni implícito ...)
.four
position absolute
top 0
left 50%
transform translateX(-50%)
.wrapFour
position relative // otherwise, absolute positioning will be relative to page!
height 50px // ensure height
background lightgreen // just a marker
Botón 5: Por último: flotante (que también trae elementos de nivel de bloque al ancho dinámico) y un cambio relativo. Aunque nunca he visto esto en la naturaleza. Quizás hay desventajas ...
.wrapFive
&:after // aka ''clearfix''
content ''''
display table
clear both
.five
float left
position relative
left 50%
transform translateX(-50%)
→ código fuente completo (sintaxis del lápiz)
Tengo un problema cuando trato de centrar los "productos" del bloque div porque no sé de antemano el ancho div. ¿Alguien tiene una solución?
Actualización: el problema que tengo es que no sé cuántos productos mostraré, puedo tener 1, 2 o 3 productos, puedo centrarlos si fuera un número fijo, ya que sabría el ancho del padre div, no sé cómo hacerlo cuando el contenido es dinámico.
.product_container {
text-align: center;
height: 150px;
}
.products {
height: 140px;
text-align: center;
margin: 0 auto;
clear: ccc both;
}
.price {
margin: 6px 2px;
width: 137px;
color: #666;
font-size: 14pt;
font-style: normal;
border: 1px solid #CCC;
background-color: #EFEFEF;
}
<div class="product_container">
<div class="products" id="products">
<div id="product_15">
<img src="/images/ecommerce/card_default.png">
<div class="price">R$ 0,01</div>
</div>
<div id="product_15">
<img src="/images/ecommerce/card_default.png">
<div class="price">R$ 0,01</div>
</div>
<div id="product_15">
<img src="/images/ecommerce/card_default.png">
<div class="price">R$ 0,01</div>
</div>
</div>
</div>
Arreglo malo, pero funciona ...
CSS:
#mainContent {
position:absolute;
width:600px;
background:#FFFF99;
}
#sidebar {
float:left;
margin-left:610px;
max-width:300;
background:#FFCCCC;
}
#sidebar{
text-align:center;
}
HTML:
<center>
<table border="0" cellspacing="0">
<tr>
<td>
<div id="mainContent">
1<br/>
<br/>
123<br/>
123<br/>
123<br/>
</div><div id="sidebar"><br/>
</div></td>
</tr>
</table>
</center>
Arreglo simple que funciona en navegadores antiguos (pero usa tablas y requiere una altura para ser configurada):
<div style="width:100%;height:40px;position:absolute;top:50%;margin-top:-20px;">
<table style="width:100%"><tr><td align="center">
In the middle
</td></tr></table>
</div>
De forma predeterminada, los elementos div se muestran como elementos de bloque, por lo que tienen un ancho del 100%, lo que hace que el centrado no tenga sentido. Según lo sugerido por Arief, debe especificar un width y luego puede usar auto cuando especifique el margin para centrar un div .
Alternativamente, también podría forzar la display: inline , pero luego tendría algo que se comporta como un span lugar de un div , por lo que no tiene mucho sentido.
Encontré una solución interesante, estaba haciendo un control deslizante y tuve que centrar los controles deslizantes, lo hice y funcionó bien. También puede agregar la posición relativa al padre y mover la posición del niño vertical. Eche un vistazo http://jsfiddle.net/bergb/6DvJz/
CSS:
#parent{
width:600px;
height:400px;
background:#ffcc00;
text-align:center;
}
#child{
display:inline-block;
margin:0 auto;
background:#fff;
}
HTML:
<div id="parent">
<div id="child">voila</div>
</div>
Encontré una solución más elegante, combinando "inline-block" para evitar el uso de float y el hacky clear: ambos. Aún requiere divisiones anidadas, lo que no es muy semántico, pero simplemente funciona ...
div.outer{
display:inline-block;
position:relative;
left:50%;
}
div.inner{
position:relative;
left:-50%;
}
¡Espero eso ayude!
Esto centrará un elemento como una lista ordenada, una lista desordenada o cualquier elemento. Solo envuélvalo con una Div con la clase de elemento externo y dé al elemento interno la clase de elemento interno.
Las cuentas de la clase del elemento externo para IE, Mozilla anterior y los navegadores más nuevos.
.outerElement {
display: -moz-inline-stack;
display: inline-block;
vertical-align: middle;
zoom: 1;
position: relative;
left: 50%;
}
.innerElement {
position: relative;
left: -50%;
}
La mayoría de los navegadores son compatibles con la display: table; Regla CSS Este es un buen truco para centrar un div en un contenedor sin agregar HTML adicional ni aplicar estilos de restricción al contenedor (como text-align: center; que centraría el resto del contenido en línea en el contenedor), mientras se mantiene el ancho dinámico para el contenido div:
HTML:
<div class="container">
<div class="centered">This content is centered</div>
</div>
CSS:
.centered { display: table; margin: 0 auto; }
.container {
background-color: green;
}
.centered {
display: table;
margin: 0 auto;
background-color: red;
}
<div class="container">
<div class="centered">This content is centered</div>
</div>
Actualización (2015-03-09):
La forma correcta de hacer esto hoy es usar las reglas de flexbox. El soporte del navegador es un poco más restringido ( soporte de tabla CSS frente a flexbox ), pero este método también permite muchas otras cosas, y es una regla de CSS dedicada para este tipo de comportamiento:
HTML:
<div class="container">
<div class="centered">This content is centered</div>
</div>
CSS:
.container {
display: flex;
flex-direction: column; /* put this if you want to stack elements vertically */
}
.centered { margin: 0 auto; }
.container {
display: flex;
flex-direction: column; /* put this if you want to stack elements vertically */
background-color: green;
}
.centered {
margin: 0 auto;
background-color: red;
}
<div class="container">
<div class="centered">This content is centered</div>
</div>
Me temo que la única forma de hacerlo sin especificar explícitamente el ancho es usar tablas (jadeando).
Prueba este nuevo css y marcado
Aquí se modifica el HTML:
<div class="product_container">
<div class="products" id="products">
<div id="product_15" class="products_box">
<img src="/images/ecommerce/card_default.png">
<div class="price">R$ 0,01</div>
</div>
<div id="product_15" class="products_box">
<img src="/images/ecommerce/card_default.png">
<div class="price">R$ 0,01</div>
</div>
<div id="product_15" class="products_box">
<img src="/images/ecommerce/card_default.png">
<div class="price">R$ 0,01</div>
</div>
</div>
Y aquí se modifica el CSS:
<pre>
.product_container
{
text-align: center;
height: 150px;
}
.products {
left: 50%;
height:35px;
float:left;
position: relative;
margin: 0 auto;
width:auto;
}
.products .products_box
{
width:auto;
height:auto;
float:left;
right: 50%;
position: relative;
}
.price {
margin: 6px 2px;
width: 137px;
color: #666;
font-size: 14pt;
font-style: normal;
border: 1px solid #CCC;
background-color: #EFEFEF;
}
Sé que esta pregunta es vieja, pero me estoy molestando. Muy similar a la respuesta de Bobince pero con código de código de trabajo.
Haz de cada producto un bloque en línea. Centrar el contenido del envase. Hecho.
http://jsfiddle.net/rgbk/6Z2Re/
<style>
.products{
text-align:center;
}
.product{
display:inline-block;
text-align:left;
background-image: url(''http://www.color.co.uk/wp-content/uploads/2013/11/New_Product.jpg'');
background-size:25px;
padding-left:25px;
background-position:0 50%;
background-repeat:no-repeat;
}
.price {
margin: 6px 2px;
width: 137px;
color: #666;
font-size: 14pt;
font-style: normal;
border: 1px solid #CCC;
background-color: #EFEFEF;
}
</style>
<div class="products">
<div class="product">
<div class="price">R$ 0,01</div>
</div>
<div class="product">
<div class="price">R$ 0,01</div>
</div>
<div class="product">
<div class="price">R$ 0,01</div>
</div>
<div class="product">
<div class="price">R$ 0,01</div>
</div>
<div class="product">
<div class="price">R$ 0,01</div>
</div>
<div class="product">
<div class="price">R$ 0,01</div>
</div>
</div>
Vea también: Centrar los bloques en línea con ancho dinámico en CSS
Un elemento con ''display: block'' (como div es por defecto) tiene un ancho determinado por el ancho de su contenedor. No se puede hacer que el ancho de un bloque dependa del ancho de su contenido (encoger para ajustar).
(Excepto los bloques que son ''float: left / right'' en CSS 2.1, pero eso no sirve para centrar).
Puede configurar la propiedad ''display'' a ''inline-block'' para convertir un bloque en un objeto de encogimiento que se pueda controlar mediante la propiedad de alineación de texto de su padre, pero el soporte del navegador es irregular. La mayoría de las veces puede salirse con la suya usando hacks (por ejemplo, vea -moz-inline-stack) si quiere ir por ese camino.
La otra manera de ir es tablas. Esto puede ser necesario cuando tienes columnas cuyo ancho no se puede conocer de antemano. Realmente no puedo decir lo que está tratando de hacer con el código de ejemplo: no hay nada obvio que necesite un bloque de ajuste a medida, pero una lista de productos podría considerarse tabular.
[PD. nunca use ''pt'' para tamaños de fuente en la web. ''px'' es más confiable si realmente necesita texto de tamaño fijo, de lo contrario las unidades relativas como ''%'' son mejores. Y "claro: ccc ambos" - ¿un error tipográfico?]
.center{
text-align:center;
}
.center > div{ /* N.B. child combinators don''t work in IE6 or less */
display:inline-block;
}
Variación leve en la respuesta de Mike M. Lin
Si agrega overflow: auto; (u hidden ) a div.product_container , entonces no necesitas div.clear .
Esto se deriva de este artículo -> http://www.quirksmode.org/css/clearing.html
Aquí se modifica el HTML:
<div class="product_container">
<div class="outer-center">
<div class="product inner-center">
</div>
</div>
</div>
Y aquí se modifica el CSS:
.product_container {
overflow: auto;
/* width property only required if you want to support IE6 */
width: 100%;
}
.outer-center {
float: right;
right: 50%;
position: relative;
}
.inner-center {
float: right;
right: -50%;
position: relative;
}
La razón por la que es mejor sin div.clear (aparte de que se siente mal tener un elemento vacío) es la asignación de margen demasiado celoso de Firefox.
Si, por ejemplo, tienes este html:
<div class="product_container">
<div class="outer-center">
<div class="product inner-center">
</div>
</div>
<div style="clear: both;"></div>
</div>
<p style="margin-top: 11px;">Some text</p>
luego, en Firefox (8.0 en el momento de escribir), verá 11px margen de 11px antes de product_container . Lo que es peor, es que obtendrá una barra de desplazamiento vertical para toda la página, incluso si el contenido se ajusta bien a las dimensiones de la pantalla.
agrega este css a tu clase product_container
margin: 0px auto;
padding: 0px;
border:0;
width: 700px;
mi solucion fue:
.parent {
display: flex;
flex-wrap: wrap;
}
.product {
width: 240px;
margin-left: auto;
height: 127px;
margin-right: auto;
}
use css3 flexbox con justify-content: center;
<div class="row">
<div class="col" style="background:red;">content1</div>
<div class="col" style="">content2</div>
</div>
.row {
display: flex; /* equal height of the children */
height:100px;
border:1px solid red;
width: 400px;
justify-content:center;
}
display:table; y establecer el margin a auto
Importante bit de código:
.relatedProducts {
display: table;
margin-left: auto;
margin-right: auto;
}
No importa cuántos elementos tenga ahora, se alineará automáticamente en el centro
Ejemplo en el fragmento de código:
.relatedProducts {
display: table;
margin-left: auto;
margin-right: auto;
}
a {
text-decoration:none;
}
<div class="row relatedProducts">
<div class="homeContentTitle" style="margin: 100px auto 35px; width: 250px">Similar Products</div>
<a href="#">test1 </a>
<a href="#">test2 </a>
<a href="#">test3 </a>
</div>
Actualización 27 de febrero de 2015: mi respuesta original sigue siendo votada, pero ahora normalmente uso el enfoque de @ bobince.
.child { /* This is the item to center... */
display: inline-block;
}
.parent { /* ...and this is its parent container. */
text-align: center;
}
Mi post original para propósitos históricos:
Es posible que desee probar este enfoque.
<div class="product_container">
<div class="outer-center">
<div class="product inner-center">
</div>
</div>
<div class="clear"/>
</div>
Aquí está el estilo a juego:
.outer-center {
float: right;
right: 50%;
position: relative;
}
.inner-center {
float: right;
right: -50%;
position: relative;
}
.clear {
clear: both;
}
La idea aquí es que contenga el contenido que desea centrar en dos divs, uno externo y otro interno. Flotas ambos divs para que sus anchos se reduzcan automáticamente para adaptarse a tu contenido. A continuación, coloca el div exterior con el borde derecho en el centro del contenedor. Por último, coloca el div interior en la dirección opuesta por la mitad de su propio ancho (en realidad, el ancho del div exterior, pero son los mismos). En última instancia, eso centra el contenido en cualquier contenedor en el que se encuentre.
Es posible que necesite esa división vacía al final si depende del contenido de su "producto" para dimensionar la altura de "product_container".
<div class="outer">
<div class="target">
<div class="filler">
</div>
</div>
</div>
.outer{
width:100%;
height: 100px;
}
.target{
position: absolute;
width: auto;
height: 100px;
left: 50%;
transform: translateX(-50%);
}
.filler{
position:relative;
width:150px;
height:20px;
}
Si el elemento objetivo está absolutamente posicionado, puede centrarlo moviéndolo 50% en una dirección ( left: 50% ) y luego transformándolo 50% en la dirección de la oposición ( transform:translateX(-50%) ). Esto funciona sin definir el ancho del elemento de destino (o con width:auto ). La posición del elemento padre puede ser estática, absoluta, relativa o fija.
<div class="product_container">
<div class="outer-center">
<div class="product inner-center">
</div>
</div>
<div class="clear"></div>
</div>
.outer-center
{
float: right;
right: 50%;
position: relative;
}
.inner-center
{
float: right;
right: -50%;
position: relative;
}
.clear
{
clear: both;
}
.product_container
{
overflow:hidden;
}
Si no proporciona "overflow: hidden" para ".product_container", el div "outside-center" se superpondrá a otros contenidos cercanos a la derecha de la misma. Cualquier enlace o botón a la derecha de "exterior-centro" no funcionará. Pruebe el color de fondo para "exterior-centro" para comprender la necesidad de "desbordamiento: oculto"
<style type="text/css">
.container_box{
text-align:center
}
.content{
padding:10px;
background:#ff0000;
color:#ffffff;
}
usa span istead de los divs internos
<div class="container_box">
<span class="content">Hello</span>
</div>