div pionowe wyrównanie środkowe css

Question

Próbuję ustawić tekst w pionie na środku div elementu abc div.

Chcę zachować wysokość na poziomie 50 pikseli i tekst, aby wyrównać w pionie w środku elementu div.

Jeszcze nie znalazłem rozwiązania tego problemu, może nie szukam właściwych rzeczy.

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>

Answer 1

Można użyć line-height: 50px;, nie trzeba będzie vertical-align: middle; tam.

Demo

---

Powyższe nie powiedzie się, jeśli masz wiele linii, a więc w tym przypadku można zawinąć tekst za pomocą span i nie używać display: table-cell; i display: table; wraz z vertical-align: middle;, także nie zapomnij używać width: 100%; dla #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; 
} 

---

Innym rozwiązaniem, o którym mogę tu pomyśleć, jest użycie właściwości transform z translateY(), gdzie Y oczywiście oznacza oś Y. Jest to dość proste ... Wszystko, co musisz zrobić, to ustawić położenie elementów w celu absolute a później stanowisko 50% od top i tłumaczyć od jego osi z ujemnym -50%

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

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

Demo

Zauważ, że to won Obsługują je starsze przeglądarki, na przykład IE8, ale możesz też tworzyć IE9 i inne starsze wersje przeglądarek Chrome i Firefox, używając odpowiednio prefiksów -ms, -moz i -webkit.

Aby uzyskać więcej informacji na temat transform, można skierować here.

Answer 2

Co powiecie na dodanie 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; 
} 

Fiddle, line-height

Albo padding na #abc. This is the result with padding

Aktualizacja

Dodaj w css:

#abc img{ 
    vertical-align: middle; 
} 

The result. Mam nadzieję, że to, czego szukasz.

Answer 3

To proste: dać div nadrzędnej to:

display: table; 

i dać div dziecka (s) to:

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

To jest to!

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

Answer 4

mogę znaleźć tego roztworu przez Sebastian Ekströma. Jest szybki, brudny i działa naprawdę dobrze. Nawet jeśli nie wiem wysokość rodzica:

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

Przeczytaj cały artykuł here.

Answer 5

Możesz użyć Wysokość linii jako wysokości div. Ale dla mnie jest to najlepsze rozwiązanie ->position:relative; top:50%; transform:translate(0,50%);

Answer 6

Stare pytanie, ale obecnieCSS3 sprawia pionowe wyrównanie naprawdę prosty!

Wystarczy dodać do #abc następujące CSS:

display:flex; 
align-items:center; 

Simple Demo

zapytania oryginalne demo updated

Prosty przykład:

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

Answer 7

Spróbuj tego:

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

Inna metoda centrowania 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; 
} 

Answer 8

ten kod jest do pionowego Bliskim i poziomego środka align:

.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%); 
 
}