Pregunta ¿Cómo se puede centrar fácilmente horizontalmente un
usando CSS?


Estoy tratando de centrar horizontalmente un <div> bloquee el elemento en una página y configúrelo con un ancho mínimo. ¿Cuál es la forma más simple de hacer esto? Quiero el <div> elemento para estar en línea con el resto de mi página. Trataré de dibujar un ejemplo:

page text page text page text page text
page text page text page text page text
               -------
               | div |
               -------
page text page text page text page text
page text page text page text page text

616
2018-03-06 08:51


origen


Respuestas:


En el caso de un ancho no fijo div (es decir, no sabe cuánto espacio ocupará el div).

#wrapper {
  background-color: green; /* for visualization purposes */
  text-align: center;
}
#yourdiv {
  background-color: red; /* for visualization purposes */
  display: inline-block;
}
<div id="wrapper">    
    <div id="yourdiv">Your text</div>
</div>

Tenga en cuenta que el ancho de #yourdiv es dinámico -> crecerá y reducirá para acomodar el texto dentro de él.

Puede verificar la compatibilidad del navegador en Puedo usar


661
2018-05-29 10:28



En la mayoría de los navegadores esto funcionará:

div.centre {
  width: 200px;
  display: block;
  background-color: #eee;
  margin-left: auto;
  margin-right: auto;
}
<div class="centre">Some Text</div>

En IE6 necesitarás agregar otro externo div:

div.layout {
  text-align: center;
}

div.centre {
  text-align: left;
  width: 200px;
  background-color: #eee;
  display: block;
  margin-left: auto;
  margin-right: auto;
}
<div class="layout">
  <div class="centre">Some Text</div>
</div>


533
2018-03-06 09:08



margin: 0 auto;

como ck ha dicho, min-ancho no es compatible con todos los navegadores


50
2018-03-06 08:55



El título de la pregunta y el contenido es realmente diferente, así que publicaré dos soluciones para eso utilizando Flexbox.

supongo Flexbox reemplazará / agregará a la solución estándar actual en el momento en que IE8 e IE9 se destruyan por completo;)

Verifique la corriente Tabla de compatibilidad del navegador para flexbox

Elemento individual

.container {
  display: flex;
  justify-content: center;
}
<div class="container">
  <img src="http://placehold.it/100x100">
</div>

Múltiples elementos pero centro solo uno

El comportamiento predeterminado es flex-direction: row que alineará todos los elementos secundarios en una sola línea. Poniéndolo en flex-direction: column ayudará a apilar las líneas.

.container {
  display: flex;
  flex-direction: column;
}
.centered {
  align-self: center;
}
<div class="container">
  <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
   </p>
  <div class="centered"><img src="http://placehold.it/100x100"></div>
  <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It
    has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. </p>
</div>


28
2017-08-14 10:29



CSS, HTML:

div.mydiv {width: 200px; margin: 0 auto}
<div class="mydiv">
    
    I am in the middle
    
</div>

Su diagrama muestra un elemento de nivel de bloque también (que generalmente es un div), no uno en línea.

De la cima de mi cabeza, min-width es compatible con FF2 + / Safari3 + / IE7 +. Se puede hacer para IE6 con hackety CSS, o un simple bit de JS.


25
2018-03-06 08:58



.center {
   margin-left: auto;
   margin-right: auto;
}

El ancho mínimo no es compatible globalmente, pero se puede implementar usando

.divclass {
   min-width: 200px;
}

Entonces puedes configurar tu div para que sea

<div class="center divclass">stuff in here</div>

21
2018-03-06 08:54



Si los navegadores antiguos no son un problema, use HTML5 / CSS3. Si lo son, aplique polyfills y aún use HTML5 / CSS3. Supongo que su div no tiene márgenes o rellenos aquí, pero son relativamente fáciles de explicar. El código sigue

.centered {
    position: relative;
    left: 50%;
    transform: translateX(-50%);
}

Lo que esto hace es:

  1. Posiciona el div relativo a su contenedor;
  2. Posiciona el divEl límite izquierdo al 50% de su ancho de contenedor horizontalmente;
  3. Traducir de vuelta horizontalmente en un 50% de el divpropio ancho.

Es fácil imaginar este proceso para confirmar que div sería centrado horizontalmente eventualmente. Como una bonificación, puedes centro verticalmente sin costo adicional:

.centered-vertically {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}

La ventaja de este enfoque es que no tiene que hacer ninguna acción contraintuitiva, como considerar su div tipo de texto, envolverlo en un contenedor adicional (a menudo semánticamente inútil) o darle un ancho fijo, que no es siempre es posible.

No olvide los prefijos del vendedor para transform si es necesario.


20
2017-11-04 07:54



Deberías usar position: relative y text-align: center en el elemento padre y luego display: inline-block en el elemento secundario que quieres centrar. Este es un patrón de diseño de CSS simple que funcionará en todos los principales navegadores. Aquí hay un ejemplo a continuación o echa un vistazo a la Ejemplo de CodePen.

p {
  text-align: left;
}
.container {
  position: relative;
  display: block;
  text-align: center;
}
/* Style your object */

.object {
  padding: 10px;
  color: #ffffff;
  background-color: #556270;
}
.centerthis {
  display: inline-block;
}
<div class="container">

  <p>Aeroplanigera Mi Psychopathologia Subdistinctio Chirographum Intuor Sons Superbiloquentia Os Sors Sesquiseptimus Municipatio Archipresbyteratus O Conclusio Compedagogius An Maius Septentrionarius Plas Inproportionabilit Constantinopolis Particularisticus.</p>

  <span class="object centerthis">Something Centered</span>

  <p>Aeroplanigera Mi Psychopathologia Subdistinctio Chirographum Intuor Sons Superbiloquentia Os Sors Sesquiseptimus Municipatio Archipresbyteratus O Conclusio Compedagogius.</p>
</div>


7
2018-06-13 20:45