vertikal in der Mitte in <div> ausrichten

126

Ich möchte die Höhe von #abc divat 50pxund den Text so halten, dass er vertikal in der Mitte des Textes ausgerichtet wird div.

body{
  padding: 0;
  margin: 0;
  margin: 0px auto;
}

#main{
  position: relative;
  background-color:blue;
  width:500px;
  height:500px;
}

#abc{
  font:Verdana, Geneva, sans-serif;
  font-size:18px;
  text-align:left;
  background-color:#0F0;
  height:50px;
  vertical-align:middle;
}
<div id="main">
 <div id="abc">
     asdfasdfafasdfasdf
 </div>
</div>

Am kranksten
quelle

Antworten:

182

Sie können verwenden line-height: 50px;, Sie werden dort nicht brauchen vertical-align: middle;.

Demo


Das Obige schlägt fehl, wenn Sie mehrere Zeilen haben. In diesem Fall können Sie Ihren Text also mit spanund als verwenden display: table-cell;und display: table;zusammen mit vertical-align: middle;und auch vergessen, width: 100%;für zu verwenden#abc

Demo

#abc{
  font:Verdana, Geneva, sans-serif;
  font-size:18px;
  text-align:left;
  background-color:#0F0;
  height:50px;
  display: table;
  width: 100%;
}

#abc span {
  vertical-align:middle;
  display: table-cell;
}

Eine andere Lösung, die ich mir hier vorstellen kann, ist die Verwendung von transformEigenschaften, bei translateY()denen Yoffensichtlich für Y-Achse steht. Es ist ziemlich einfach ... Alles, was Sie tun müssen, ist die Position der Elemente auf absoluteund später 50%von der Position zu setzen und topvon ihrer Achse mit negativ zu übersetzen-50%

div {
  height: 100px;
  width: 100px;
  background-color: tomato;
  position: relative;
}

p {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

Demo

Beachten Sie, dass dies in älteren Browsern, z. B. IE8, nicht unterstützt wird. Sie können jedoch IE9 und andere ältere Browserversionen von Chrome und Firefox mithilfe von -ms, -mozbzw. -webkitPräfixen erstellen.

Weitere Informationen dazu transformfinden Sie hier .

Mr. Alien
quelle
Ich musste diese einfache Lösung für die Zeilenhöhe mein ganzes Berufsleben lang kennen und habe erst jetzt davon erfahren. Vielen Dank, Herr Alien.
Nathan Beach
94

Es ist ganz einfach: Geben Sie dem übergeordneten Div Folgendes:

display: table;

und geben Sie dem Kind div (s) Folgendes:

display: table-cell;
vertical-align: middle;

Das ist es!

.parent{
    display: table;
}
.child{
    display: table-cell;
    vertical-align: middle;
    padding-left: 20px;
}
<div class="parent">
    <div class="child">
        Test
    </div>
    <div class="child">
        Test Test Test <br/> Test Test Test
    </div>
    <div class="child">
        Test Test Test <br/> Test Test Test <br/> Test Test Test
    </div>
<div>

Burak Çanga
quelle
6
Dies ist schlecht, da hier Tabelle als Hack verwendet wird. In den meisten Fällen funktioniert dies möglicherweise. Wenn Sie jedoch die Breite der 'Tabelle' ändern möchten, funktioniert dies nicht ordnungsgemäß (was ich jetzt bei dieser Lösung habe )
Kevin Simple
Ich musste das nicht display:table;dem Elternteil hinzufügen , damit es funktioniert.
VincentPerrin.com
Vielleicht ist dies ein Hack ... aber es FUNKTIONIERT und die meisten anderen Lösungen funktionieren nur in bestimmten Fällen und sind in unserem Fall oft nicht verwendbar.
Jerry
Vorteil dieser Lösung: funktioniert mit allen Arten von Inhalten (nicht nur für Text und nicht nur eine einzelne Zeile ...)
Jerry
77

Alte Frage, aber heutzutage macht CSS3 die vertikale Ausrichtung wirklich einfach !

#abcFügen Sie einfach dem folgenden CSS hinzu:

display:flex;
align-items:center;

Einfache Demo

Ursprüngliche Frage Demo aktualisiert

Einfaches Beispiel:

.vertical-align-content {
  background-color:#f18c16;
  height:150px;
  display:flex;
  align-items:center;
  /* Uncomment next line to get horizontal align also */
  /* justify-content:center; */
}
<div class="vertical-align-content">
  Hodor!
</div>

Jaqen H'ghar
quelle
3
Ich würde auch vorschlagen: Anzeige: Gitter; Ausrichtungselemente: Mitte; Es funktioniert besser, wenn Sie mehr als ein Objekt haben, um vertikal zusammen auszurichten
Leonardo Daga
Welche Browser unterstützen CSS3 ?
Kiquenet
@ Kiquenet, 92% des globalen Marktes caniuse.com/#search=align-items
Daniel Kucal
Perfekt! Einfach und leicht .. einfach in den Container geben
Ujjwal Singh
47

Ich habe diese Lösung von Sebastian Ekström gefunden. Es ist schnell, schmutzig und funktioniert sehr gut. Auch wenn Sie die Größe der Eltern nicht kennen:

.element {
  position: relative;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

Lesen Sie den ganzen Artikel hier .

Scott
quelle
3
Dies kann zu Unschärfen führen, da das Ergebnis von Transformationen dazu führen kann, dass Dinge an Positionen mit halben Pixeln positioniert werden.
Kevin Wheeler
1
Es gibt ein Update für den Beitrag, der auf dieses Problem abzielt. Auf Eltern : transform-style: preserve-3d;!
Andry
8

Sie können die Zeilenhöhe so groß wie die Höhe des Div verwenden. Aber für mich ist die beste Lösung dies ->position:relative; top:50%; transform:translate(0,50%);

Andris
quelle
4

Wie wäre es mit Hinzufügen line-height?

#abc{
  font:Verdana, Geneva, sans-serif;
  font-size:18px;
  text-align:left;
  background-color:#0F0;
  height:50px;
  vertical-align:middle;
  line-height: 45px;
}

Geige, Zeilenhöhe

Oder paddingweiter #abc. Dies ist das Ergebnis mit Polsterung

Aktualisieren

Fügen Sie in Ihrem CSS hinzu:

#abc img{
   vertical-align: middle;
}

Das Ergebnis . Hoffe das was du suchst.

Aldi Unanto
quelle
funktioniert nicht ganz so, wie ich es möchte. Wenn Sie die Höhe oder die Linienhöhe ändern, stimmt etwas nicht. habe schon eine Antwort bekommen, trotzdem danke
Krankster
2

Versuche dies:

.main_div{
    display: table;
    width: 100%;
}
.cells {
    display: table-cell;
    vertical-align: middle;
}

Eine andere Methode zum Zentrieren eines Div:

<div id="parent">
    <div id="child">Content here</div>
</div>

#parent {position: relative;}

#child {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 50px;
    height: 100px;
    margin: auto;
}
Freund
quelle
2

 div {
    height:200px;
    text-align: center;
    padding: 2px;
    border: 1px solid #000;
    background-color: green;
}

.text-align-center {
    display: flex;
    align-items: center;
    justify-content: center;
}
<div class="text-align-center"> Align center</div>

Fouzia Khan
quelle
Erklären Sie es bitte!
Szabolcs Páll
1

Verwenden Sie die CSS-Eigenschaft translateY, um Ihren Text vertikal im Container zu zentrieren

<style>
.centertext{

    position: relative;
    top: 50%;
    transform: translateY(40%);

}
</style>

Und wenden Sie es dann auf Ihr enthaltenes DIV an

  <div class="centertext">
        <font style="color:white; font-size:20px;">   Your Text Here </font>
  </div>

Passen Sie den Prozentsatz der Übersetzung an Ihre Bedürfnisse an. Hoffe das hilft

Hondaman900
quelle
1

Dieser Code gilt für die vertikale mittlere und horizontale Mittelausrichtung ohne Angabe einer festen Höhe:

.parent-class-name {
  position: relative;
}

.className {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  margin: 0 auto;
  transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
}

Nilesh Pawar
quelle