wake-up-neo.com

div vertikal ausrichten mitte css

Ich versuche, dass mein Text nur vertikal auf die Mitte des div des abc div ausgerichtet wird.

Ich möchte die Höhe bei 50px halten und den Text vertikal in der Mitte des div ausrichten. 

Ich habe noch keine Lösung für dieses Problem gefunden, vielleicht suche ich nicht die richtigen Dinge.

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>

101
Sickest

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

Demo


Das Obige wird fehlschlagen, wenn Sie mehrere Zeilen haben. In diesem Fall können Sie Ihren Text mit span umbrechen und dann display: table-cell; und display: table; zusammen mit vertical-align: middle; verwenden. Vergessen Sie auch nicht, width: 100%; für #abc zu verwenden.

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 vorstellen kann, ist die Verwendung der transform-Eigenschaft mit translateY(), wobei Y offensichtlich für die Y-Achse steht. Es ist ziemlich einfach ... Sie müssen lediglich die Position der Elemente auf absolute und die spätere Position 50% von der top setzen und von ihrer Achse mit negativem -50% übersetzen.

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

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

Demo

Beachten Sie, dass dies bei älteren Browsern, z. B. IE8, nicht unterstützt wird. Sie können jedoch IE9 und andere ältere Browserversionen von Chrome und Firefox mithilfe der Präfixe -ms, -moz und -webkit erstellen.

Weitere Informationen zu transform finden Sie hier .

152
Mr. Alien

Es ist ganz einfach: Gib dem übergeordneten div dies:

display: table;

und gib dem Kind div (s) das:

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>

85
Burak Çanga

Alte Frage, aber heuteCSS3 macht vertikale Ausrichtung wirklich einfach!

Fügen Sie einfach den folgenden CSS-Code zu #abc 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>

48
Jaqen H'ghar

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

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

Lesen Sie den vollständigen Artikel hier .

38
Scott

Sie können die Höhe der Linie auch so groß wie die Höhe des Bereichs verwenden. Für mich ist die beste Lösung jedoch -> position:relative; top:50%; transform:translate(0,50%);

6
Andris

Wie wäre es, line-height hinzuzufügen?

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

Geige, Schnurhöhe

Oder padding bei #abc. Dies ist das Ergebnis mit Auffüllen

Update

Fügen Sie Ihrem CSS hinzu:

#abc img{
   vertical-align: middle;
}

Das Ergebnis . Hoffe das, wonach du suchst.

3
Aldi Unanto

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;
}
1
Friend
 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>
0
Fouzia Khan

Verwenden Sie die CSS-Eigenschaft translateY, um den Text in seinem Container vertikal zu zentrieren

<style>
.centertext{

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

}
</style>

Und wenden Sie es dann auf Ihr enthaltendes 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

0
Hondaman900