para - El centro de CSS muestra el bloque en línea?

lista de codigos css

Question

Tengo un código de trabajo aquí: http://jsfiddle.net/WVm5d/ (es posible que necesite agrandar la ventana de resultados para ver el efecto de centro de alineación)

Pregunta

El código funciona bien pero no me gusta tener display: table; . Es la única forma en que podría hacer que el centro de alineación de la clase envolvente. Creo que sería mejor si hubiera una forma de usar display: block; o display: inline-block; . ¿Es posible resolver el centro de alineación de otra manera?

Agregar un fijo al contenedor no es una opción para mí.

También pegaré mi código aquí si el enlace de JS Fiddle se rompe en el futuro:

HTML

<div class="wrap">
    <div class="sidebar">
        Sidebar
    </div>
    <div class="container">
        <div class="box">
            Height1
        </div>
        <div class="box">
            Height2<br />
            Height2
        </div>
        <div class="box">
            Height3<br />
            Height3<br />
            Height3
        </div>
        <div class="box">
            Height1
        </div>
        <div class="box">
            Height2<br />
            Height2
        </div>
        <div class="box">
            Height3<br />
            Height3<br />
            Height3
        </div>
    </div>
    <div class="sidebar">
        Sidebar
    </div>
</div>

CSS

body {
    background: #bbb;
}

.wrap {
    background: #aaa;
    margin: 0 auto;
    display: table;
    overflow: hidden;
}

.sidebar {
    width: 200px;
    float: left;
    background: #eee;
}

.container {
    margin: 0 auto;
    background: #ddd;
    display: block;
    float: left;
    padding: 5px;
}

.box {
    background: #eee;
    border: 1px solid #ccc;
    padding: 10px;
    margin: 5px;
    float: left;
}

.box:nth-child(3n+1) {
    clear: left;
}

Answer 1

Acabo de cambiar 2 parámetros:

.wrap {
    display: block;
    width:661px;
}

Demo en vivo

Answer 2

El gran artículo que encontré que funcionó mejor para mí fue agregar un% al tamaño

.wrap {
margin-top:5%;
margin-bottom:5%;
height:100%;
display:block;}

Answer 3

La solución aceptada no me funcionaría, ya que necesito un elemento hijo con display: inline-block para estar centrado tanto horizontal como verticalmente dentro de un elemento primario de ancho completo.

Utilicé las propiedades justify justify-content y align-items Flexbox, que respectivamente le permiten centrar los elementos horizontal y verticalmente. Al establecer ambos para center en el elemento primario, el elemento secundario (o incluso elementos de elementos múltiples) estará perfectamente en el medio.

Esta solución no requiere un ancho fijo, lo cual no hubiera sido adecuado para mí ya que el texto de mi botón cambiará.

Aquí hay una demostración de CodePen y un fragmento del código relevante a continuación:

.parent {
  display: flex;
  justify-content: center;
  align-items: center;
}

.child {
  display: inline-block;
}

<div class="parent">
  <a class="child" href="#0">Button</a>
</div>

Answer 4

No necesita usar "display: table". La razón por la cual su intento de autocentrado de margen: 0 no funciona es porque no especificó un ancho.

Esto funcionará bien:

.wrap {
    background: #aaa;
    margin: 0 auto;
    width: some width in pixels since it''s the container;
}

No necesita especificar display: block ya que ese div se bloqueará de manera predeterminada. También es probable que pierda el desbordamiento: oculto.

Answer 5

Prueba esto. Agregué text-align: center to body y display:inline-block para envolver, y luego eliminé tu display: table

body {
    background: #bbb;
    text-align: center;
}

.wrap {
    background: #aaa;
    margin: 0 auto;
    display: inline-block;
    overflow: hidden;
}

Answer 6

Si tiene un <div> con text-align:center; , entonces cualquier texto dentro de él se centrará con respecto al ancho de ese elemento contenedor. inline-block elementos de inline-block se tratan como texto para este fin, por lo que también estarán centrados.

Answer 7

Solo usa:

line-height:50px

Reemplaza "50px" con la misma altura que tu div.

Answer 8

También puede hacer esto con el posicionamiento, establecer div principal a relativo y div infantil a absoluto.

.wrapper {
      position: relative;
  }
.childDiv {
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
  }