Warum funktioniert Vertical-Align: Middle nicht für meine Spanne oder Div?

Ich versuche, ein spanoder divElement vertikal in einem anderen divElement zu zentrieren. Wenn ich jedoch sage vertical-align: middle, passiert nichts. Ich habe versucht, die displayEigenschaften beider Elemente zu ändern , und nichts scheint zu funktionieren.

Folgendes mache ich derzeit auf meiner Webseite:

.main {
  height: 72px;
  vertical-align: middle;
  border: 1px solid black;
  padding: 2px;
}
    
.inner {
  vertical-align: middle;
  border: 1px solid red;    
}
    
.second {
  border: 1px solid blue; 
}

<div class="main">
  <div class="inner">
    This box should be centered in the larger box
    <div class="second">Another box in here</div>
  </div>
</div>

Hier ist eine jsfiddle der Implementierung, die zeigt, dass sie nicht funktioniert: http://jsfiddle.net/gZXWC/

Dies scheint der beste Weg zu sein - seit meinem ursprünglichen Beitrag ist einige Zeit vergangen, und dies sollte jetzt getan werden: http://jsfiddle.net/m3ykdyds/200

/* CSS file */

.main {
    display: table;
}

.inner {
    border: 1px solid #000000;
    display: table-cell;
    vertical-align: middle;
}

/* HTML File */
<div class="main">
    <div class="inner"> This </div>
</div>

Verwenden von CSS3:

<div class="outer">
   <div class="inner"/>
</div>

CSS:

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

Hinweis: Dies funktioniert möglicherweise nicht in alten IE

Versuchen Sie dies, funktioniert für mich sehr gut:

/* Internet Explorer 10 */
display:-ms-flexbox;
-ms-flex-pack:center;
-ms-flex-align:center;

/* Firefox */
display:-moz-box;
-moz-box-pack:center;
-moz-box-align:center;

/* Safari, Opera, and Chrome */
display:-webkit-box;
-webkit-box-pack:center;
-webkit-box-align:center;

/* W3C */
display:box;
box-pack:center;
box-align:center;

Das Einstellen der Zeilenhöhe auf die gleiche Höhe, die div enthält, funktioniert ebenfalls

DEMO http://jsfiddle.net/kevinPHPkevin/gZXWC/7/

.inner {
    line-height:72px;
    border: 1px solid #000000;
}

Falls Sie sich nicht auf die Flexbox verlassen können ... Platzieren Sie sie .childin .parentder Mitte. Funktioniert, wenn die Pixelgrößen unbekannt sind (mit anderen Worten, immer) und auch mit IE9 + keine Probleme auftreten.

.parent { position: relative; }

.child {
    position: absolute;
    top : 50%;
    left: 50%;
    -ms-transform: translate(-50%, -50%);
    transform    : translate(-50%, -50%);    
}

<div class="parent" style="background:lightyellow; padding:6em"> 
  <div class="child" style="background:gold; padding:1em">&mdash;</div> 
</div>

Sie sollten vertical-align: middledas innere Element anlegen , nicht das äußere Element. Stellen Sie die line-heightEigenschaft für das äußere Element so ein, dass sie mit der heightdes äußeren Elements übereinstimmt . Dann setzen display: inline-blockund line-height: normalauf das innere Element. Auf diese Weise wird der Text auf dem inneren Element mit einer normalen Zeilenhöhe umbrochen. Funktioniert in Chrome, Firefox, Safari und IE 8+

.main {
    height: 72px;
    line-height:72px;
    border: 1px solid black;
}
.inner {
    display: inline-block;
    vertical-align: middle;
    line-height: normal;
}

<div class="main">
    <div class="inner">Vertically centered text</div>
</div>

Geige

Ich habe dies verwendet, um alles in der Mitte des Wrapper-Div auszurichten, falls es jemandem hilft - ich fand es am einfachsten:

div.wrapper {
  /* --- This works --- */
  display: flex;
  /* Align Vertically */
  align-items: center;
  /* Align Horizontally */
  justify-content: center;
  /* --- ---------- ----- */
  width: 100%;
  height:100px;
  background-color: blue;
}
div.inner {
  width: 50px;
  height: 50px;
  background-color: orange;
}

<div class="wrapper">
  <div class="inner">
  </div>
</div>

Hier haben Sie ein Beispiel für zwei Möglichkeiten, eine vertikale Ausrichtung durchzuführen. Ich benutze sie und sie funktionieren ziemlich gut. Einer verwendet die absolute Positionierung und der andere die Flexbox .

Beispiel für vertikale Ausrichtung

Mit flexbox können Sie ein Element innerhalb von in einem anderen Element mit display: flex;using ausrichten align-self. Wenn Sie es auch horizontal ausrichten müssen, können Sie align-itemsund verwendenjustify-content im Container verwenden.

Wenn Sie die Flexbox nicht verwenden möchten, können Sie die Positionseigenschaft verwenden. Wenn Sie den Container relativ und den Inhalt absolut machen, kann sich der Inhalt innerhalb des Containers frei bewegen. Wenn Sie also top: 0;und left: 0;im Inhalt verwenden, wird es in der oberen linken Ecke des Containers positioniert.

Um es auszurichten, müssen Sie nur die oberen und linken Verweise auf 50% ändern. Dadurch wird der Inhalt in der Containermitte von der oberen linken Ecke des Inhalts positioniert.

Sie müssen dies also korrigieren, indem Sie den Inhalt, der halb so groß ist, nach links und oben übersetzen.

Hier ist ein großartiger Artikel darüber, wie man sich vetisch ausrichtet. Ich mag den Float-Weg.

http://www.vanseodesign.com/css/vertical-centering/

Der HTML:

<div id="main">
    <div id="floater"></div>
    <div id="inner">Content here</div>
</div>

Und der entsprechende Stil:

#main {
   height: 250px;
}

#floater {
   float: left;
   height: 50%;
   width: 100%;
   margin-bottom: -50px;
}

#inner {
   clear: both;
   height: 100px;
}

HTML

<div id="myparent">
  <div id="mychild">Test Content here</div>
</div>

CSS

#myparent {
  display: table;
}
#mychild {
  display: table-cell;
  vertical-align: middle;
}

Wir setzen das übergeordnete Div so, dass es als Tabelle angezeigt wird, und das untergeordnete Div so, dass es als Tabellenzelle angezeigt wird. Wir können dann die vertikale Ausrichtung für das untergeordnete Div verwenden und dessen Wert auf Mitte setzen. Alles in diesem untergeordneten Div wird vertikal zentriert.

Es ist einfach. Fügen display:table-cellSie einfach Ihre Hauptklasse hinzu.

.main {
  height: 72px;
  vertical-align: middle;
  display:table-cell;
  border: 1px solid #000000;
}

Schauen Sie sich diese jsfiddle an !

Hier ist die neueste einfachste Lösung: Sie müssen nichts ändern. Fügen Sie einfach drei Zeilen CSS-Regeln zu Ihrem Container des Div hinzu, in dem Sie zentrieren möchten. Ich liebe Flex Box#LoveFlexBox

.main {
  /* I changed height to 200px to make it easy to see the alignment. */
  height: 200px;
  vertical-align: middle;
  border: 1px solid #000000;
  padding: 2px;
  
  /* Just add the following three rules to the container of which you want to center at. */
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* This is true vertical center, no math needed. */
}
.inner {
  border: 1px solid #000000;
}
.second {
  border: 1px solid #000000;
}

<div class="main">
  <div class="inner">This box should be centered in the larger box
    <div class="second">Another box in here</div>
  </div>
  <div class="inner">This box should be centered in the larger box
    <div class="second">Another box in here</div>
  </div>
</div>

Bonus

Der justify-contentWert kann auf die folgenden Optionen eingestellt werden:

• flex-startDadurch wird das untergeordnete Div an der Stelle ausgerichtet, an der der Flex-Flow in seinem übergeordneten Container beginnt. In diesem Fall bleibt es oben.

• center, wodurch das untergeordnete div an der Mitte des übergeordneten Containers ausgerichtet wird. Dies ist wirklich ordentlich, da Sie kein zusätzliches Div hinzufügen müssen, um alle untergeordneten Elemente zu umschließen, um den Wrapper in einen übergeordneten Container zu legen und die untergeordneten Elemente zu zentrieren. Aus diesem Grund, ist dies das ist wahre vertikale Mitte (in der column flex-direction. In ähnlicher Weise, wenn Sie die Änderung flow-directionzu rowwerden geworden horizontal zentriert.

• flex-end, wodurch das untergeordnete Div an der Stelle ausgerichtet wird, an der der Flex-Flow in seinem übergeordneten Container endet. In diesem Fall wird es nach unten verschoben.

• space-between, die alle Kinder vom Beginn des Flusses bis zum Ende des Flusses verbreitet. Bei der Demo habe ich ein weiteres Kinder-Div hinzugefügt, um zu zeigen, dass sie verteilt sind.

• space-around, ähnlich space-between, aber mit der Hälfte des Raums am Anfang und Ende des Flusses.

Da dies bei a vertical-alignwie erwartet funktioniert td, können Sie eine einzelne Zelle tablein das divFeld einfügen , um den Inhalt auszurichten.

<div>
    <table style="width: 100%; height: 100%;"><tr><td style="vertical-align: middle; text-align: center">
        Aligned content here...
    </td></tr></table>
</div>

Klobig, funktioniert aber soweit ich das beurteilen kann. Es hat möglicherweise nicht die Nachteile der anderen Problemumgehungen.

Legen Sie den Inhalt einfach in eine Tabelle mit einer Höhe von 100% und stellen Sie die Höhe für den Hauptbereich ein

<div style="height:80px;border: 1px solid #000000;">
<table style="height:100%">
<tr><td style="vertical-align: middle;">
  This paragraph should be centered in the larger box
</td></tr>
</table>
</div>

Um ein span- oder div-Element innerhalb eines anderen div vertikal zu zentrieren, fügen Sie dem untergeordneten div eine Position relativ zum übergeordneten div und eine absolute Position hinzu. Jetzt kann das untergeordnete div an einer beliebigen Stelle innerhalb des div positioniert werden. Beispiel unten zentriert sowohl horizontal als auch vertikal.

<div class="parent">
    <div class="child">Vertically and horizontally centered child div</div>
</div>

CSS:

.parent{
    position: relative;
}
.child{
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}

Dies ist ein moderner Ansatz, der die CSS-Flexbox-Funktionalität nutzt. Sie können den Inhalt in Ihrem übergeordneten Container jetzt vertikal ausrichten, indem Sie diese Stile einfach zum .mainContainer hinzufügen

.main {
        display: flex;
        flex-direction: column;
        justify-content: center;
}

Und du kannst loslegen!