CSS-Center-Anzeige Inline-Block?

Ich habe hier einen Arbeitscode : http://jsfiddle.net/WVm5d/ (Möglicherweise müssen Sie das Ergebnisfenster vergrößern, um den Effekt "Ausrichtung ausrichten" zu sehen.)

Frage

Der Code funktioniert gut, aber ich mag nicht display: table;. Nur so kann ich das Wrap-Class-Align-Center erstellen. Ich denke, es wäre besser, wenn es eine Möglichkeit gäbe, display: block;oder zu verwenden display: inline-block;. Ist es möglich, das Ausrichtungszentrum auf andere Weise zu lösen?

Das Hinzufügen eines Fixed with zum Container ist für mich keine Option.

Ich werde meinen Code auch hier einfügen, wenn der JS Fiddle-Link in Zukunft unterbrochen wird:

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;
}

<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>

Die akzeptierte Lösung würde für mich nicht funktionieren, da ich ein untergeordnetes Element benötige display: inline-block, das sowohl horizontal als auch vertikal innerhalb eines übergeordneten Elements mit 100% Breite zentriert sein muss.

Ich habe Flexboxs justify-contentund align-itemsEigenschaften verwendet, mit denen Sie Elemente horizontal und vertikal zentrieren können. Wenn Sie beide centerauf das übergeordnete Element setzen, befindet sich das untergeordnete Element (oder sogar mehrere Elemente!) Perfekt in der Mitte.

Diese Lösung erfordert keine feste Breite, was für mich ungeeignet gewesen wäre, da sich der Text meiner Schaltfläche ändert.

Hier ist eine CodePen-Demo und ein Ausschnitt des entsprechenden Codes unten:

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

.child {
  display: inline-block;
}

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

Versuche dies. Ich fügte text-align: centerzu Körper und display:inline-blockzu wickeln, und entfernte dann Ihredisplay: table

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

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

Wenn Sie ein <div>with haben text-align:center;, wird jeder darin enthaltene Text in Bezug auf die Breite dieses Containerelements zentriert. inline-blockElemente werden zu diesem Zweck als Text behandelt, sodass sie auch zentriert werden.

Sie können dies auch mit der Positionierung tun, indem Sie Parent Div auf Relative und Child Div auf Absolute setzen.

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

Sie müssen "display: table" nicht verwenden. Der Grund, warum Ihr Versuch zur automatischen Zentrierung von Rand: 0 nicht funktioniert, liegt darin, dass Sie keine Breite angegeben haben.

Dies wird gut funktionieren:

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

Sie müssen display: block nicht angeben, da dieses div standardmäßig blockiert ist. Sie können wahrscheinlich auch den Überlauf verlieren: versteckt.

Ähnlich wie bei der Antwort von @ vijayscode wird hiermit ein Inline-Block-Element horizontal zentriert (ohne dass auch die Stile der übergeordneten Elemente geändert werden müssen):

  display: inline-block;
  position: relative;
  left: 50%; // Move the element to the left by 50% of the container's width
  transform: translateX(-50%); // Calculates 50% of the element's width and moves it by that amount across the X-axis to the left

Ich habe gerade 2 Parameter geändert:

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

Live-Demo

Toller Artikel Ich fand, was für mich am besten funktionierte, war ein% zur Größe hinzuzufügen

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

Benutz einfach:

line-height:50px

Ersetzen Sie "50px" durch die gleiche Höhe wie Ihr Div.