it-swarm.com.de

CSS vertikal ausrichten: Mitte funktioniert nicht

Ich versuche, ein span- oder div-Element in einem anderen div-Element vertikal zu zentrieren. Wenn ich jedoch vertical-align: middle stelle, passiert nichts. Ich habe versucht, die display-Eigenschaften beider Elemente zu ändern, und nichts scheint zu funktionieren.

Das mache ich gerade 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 ein jsfiddle der Implementierung, die zeigt, dass es nicht funktioniert: http://jsfiddle.net/gZXWC/

188
Brad

Dies scheint der beste Weg zu sein - seit meinem ursprünglichen Beitrag ist einige Zeit vergangen und dies sollte jetzt geschehen: 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>

Sie können auch Folgendes verwenden:

CSS3 verwenden:

<!-- HTML -->
<div class="wrapper">
   <div>Hi</div>
</div>

/* CSS */
.wrapper {
  display : flex;
  align-items : center;
}
179
Charles Addis

Probieren Sie das aus, 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;
127
Mahendra Liya

CSS3 verwenden:

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

Css:

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

Hinweis: Dies funktioniert möglicherweise nicht in alten IEs

95
user1782556

Wenn Sie die Zeilenhöhe auf dieselbe Höhe wie div setzen, wird dies ebenfalls funktionieren 

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

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

Falls Sie sich nicht auf flexbox verlassen können ... Platzieren Sie .child in der Mitte von .parent. Funktioniert, wenn Pixelgrößen unbekannt sind (mit anderen Worten immer) und auch bei 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>

20
kornieff

Sie sollten vertical-align: middle auf das innere Element setzen, nicht das äußere Element. Stellen Sie die line-height-Eigenschaft für das äußere Element so ein, dass sie der height des äußeren Elements entspricht. Setzen Sie dann display: inline-block und line-height: normal für das innere Element. Dadurch wird der Text auf dem inneren Element mit einer normalen Zeilenhöhe umbrochen. Funktioniert in Chrome, Firefox, Safari und IE 8+

HTML

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

CSS

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

Fiddle

14
Tim Perkins

Ich habe dies verwendet, um alles in der Mitte des Wrappers div auszurichten, falls es jemandem hilft.

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>

7
Ruth Young

Hier haben Sie ein Beispiel für zwei Möglichkeiten, eine vertikale Ausrichtung vorzunehmen. Ich benutze sie und sie funktionieren ziemlich gut. Eine verwendet die absolute Positionierung und die andere verwendet flexbox .

Beispiel für vertikale Ausrichtung

Mit flexbox können Sie ein Element innerhalb eines anderen Elements mit display: flex; mit align-self ausrichten. Wenn Sie es auch horizontal ausrichten müssen, können Sie align-items und justify-content im Container verwenden.

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

 Absolute positioning

Dann müssen Sie zum Ausrichten nur die oberen und linken Referenzen auf 50% ändern. Dadurch wird der Inhalt in der Behältermitte von der oberen linken Ecke des Inhalts positioniert.

 Align in the middle of the container

Daher müssen Sie dies korrigieren, indem Sie den Inhalt um die Hälfte nach links und oben verschieben.

 Absolute centered

7
Timbergus

HTML

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

CSS

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

Wir legen fest, dass das übergeordnete div als Tabelle angezeigt wird und das untergeordnete div als Tabellenzelle. Wir können dann das untergeordnete div vertikal ausrichten und seinen Wert auf middle setzen. Alles in diesem Child-Div wird vertikal zentriert.

5
Brijesh Patel

Es ist einfach. Fügen Sie einfach display:table-cell in Ihre Hauptklasse ein.

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

Schauen Sie sich diese jsfiddle an!

4
RizonBarns

hier ist ein großartiger artikel, wie man sich vetical ausrichten kann ...

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

Das 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;
}
4
Dory Zidon

Hier ist die neueste einfachste Lösung - Sie müssen nichts ändern. Fügen Sie einfach drei Zeilen CSS-Regeln zu Ihrem Container des Divs hinzu, auf den 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-content-Wert kann auf die folgenden Optionen eingestellt werden:

  • flex-start, der das untergeordnete div an dem Startpunkt des Flex-Flows im übergeordneten Container ausrichtet. In diesem Fall bleibt es oben.

  • center, wodurch das untergeordnete div an der Mitte des übergeordneten Containers ausgerichtet wird. Das ist wirklich nett, denn Sie müssen kein zusätzliches div hinzufügen, um alle Kinder zu umwickeln, um den Wrapper in einen übergeordneten Container zu legen, um die Kinder zu zentrieren. Aus diesem Grund ist dies das vertikale Zentrum von true (in der Variablen columnflex-direction. Wenn Sie flow-direction in row ändern, wird dies ebenfalls horizontal zentriert.

  • flex-end, wodurch das untergeordnete div an dem Ende des Flex-Flows in seinem übergeordneten Container ausgerichtet wird. In diesem Fall wird es nach unten verschoben.

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

  • space-around, ähnlich wie space-between, jedoch mit half vom Leerzeichen am Anfang und Ende des Flows.

3
Zhenyang Hua

Da vertical-align für eine td wie erwartet funktioniert, können Sie eine table-Zelle in die div setzen, um deren 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>

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

2
Smig

Legen Sie den Inhalt einfach in eine Tabelle mit einer Höhe von 100% und legen Sie die Höhe für die Hauptabteilung fest

<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>
1
Ramiro Mosquera

Um ein Span- oder Div-Element in einem anderen div vertikal zu zentrieren, fügen Sie die Position relativ zum übergeordneten div und die absolute Position zum untergeordneten div hinzu. Jetzt kann das untergeordnete div an einer beliebigen Stelle innerhalb des div positioniert werden.

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