wyrównaj w pionie do środka w <div>


126

Chcę, aby wysokość #abc divat 50pxi tekst były wyrównane w pionie na środku 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>

Odpowiedzi:


183

Możesz użyć line-height: 50px;, nie będziesz vertical-align: middle;tam potrzebować .

Próbny


Powyższe nie powiedzie się, jeśli masz wiele linii, więc w takim przypadku możesz zawinąć tekst za pomocą spani, a następnie użyć display: table-cell;i display: table;wraz z vertical-align: middle;, nie zapomnij również użyć width: 100%;dla#abc

Próbny

#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, które przychodzi mi do głowy, jest użycie transformwłaściwości translateY()gdzie Yoczywiście oznacza oś Y. To całkiem proste ... Wszystko, co musisz zrobić, to ustawić pozycję elementów na absolutei później pozycję 50%od topi przesunąć od osi z ujemnym-50%

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

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

Próbny

Pamiętaj, że nie będzie to obsługiwane w starszych przeglądarkach, na przykład IE8, ale możesz utworzyć IE9 i inne starsze wersje przeglądarek Chrome i Firefox, używając -ms, -mozi-webkit odpowiednio prefiksów .

Więcej informacji na temat transformmożna znaleźć tutaj .


Musiałem znać to proste rozwiązanie na wysokość linii przez całe moje życie zawodowe i dopiero teraz się o nim dowiedziałem. Dziękuję, panie obcy.
Nathan Beach

94

To proste: podaj rodzicowi div:

display: table;

i daj dziecku element (y) div:

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

Otóż ​​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>


6
to jest złe, ponieważ używa to tabeli jako hackowania, może działać w większości przypadków, ale jeśli chcesz zmienić szerokość `` tabeli '', to nie będzie działać poprawnie (co mam teraz problem z tym rozwiązaniem )
Kevin Simple

Nie musiałem dodawać display:table;do rodzica, aby to działało.
VincentPerrin.com,

Może to hack ... ale DZIAŁA, a większość innych rozwiązań działa tylko w określonych przypadkach i często nie są użyteczne w naszym przypadku.
Jerry

Zaleta tego rozwiązania: działa ze wszystkimi typami treści (nie tylko dla tekstu, a nie tylko dla jednej linii ...)
Jerry

77

Stare pytanie, ale obecnie CSS3 sprawia, że ​​wyrównanie w pionie jest naprawdę proste !

Po prostu dodaj do #abcnastępującego css:

display:flex;
align-items:center;

Proste demo

Oryginalne demo pytania zostało zaktualizowane

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>


3
Proponuję również: display: grid; align-items: center; Działa lepiej, gdy masz więcej niż jeden obiekt do wyrównania w pionie
Leonardo Daga

Jakie przeglądarki obsługują CSS3 ?
Kiquenet

@Kiquenet, 92% światowego rynku caniuse.com/#search=align-items
Daniel Kucal,

Perfekt! Proste i łatwe… wystarczy dodać do kontenera
Ujjwal Singh

47

Znalazłem to rozwiązanie autorstwa Sebastiana Ekströma. Jest szybki, brudny i działa naprawdę dobrze. Nawet jeśli nie znasz wzrostu rodzica:

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

Przeczytaj cały artykuł tutaj .


3
Może to spowodować rozmycie rzeczy, ponieważ wynik transformacji może prowadzić do umieszczenia rzeczy w lokalizacjach o połowie piksela.
Kevin Wheeler,

1
Jest aktualizacja postu dotyczącego tego problemu. Na rodzica transform-style: preserve-3d;:!
Andry

8

Możesz użyć Wysokość linii równą wysokości elementu div. Ale dla mnie najlepszym rozwiązaniem jest to ->position:relative; top:50%; transform:translate(0,50%);


4

Co powiesz 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;
}

Skrzypce, wysokość linii

Albo paddingdalej #abc. To jest wynik z dopełnieniem

Aktualizacja

Dodaj w swoim CSS:

#abc img{
   vertical-align: middle;
}

Wynik . Mam nadzieję, że tego szukasz.


nie działa tak, jak chcę, kiedy zmieniasz wysokość lub wysokość linii, coś jest nie tak. już dostałem odpowiedź, w każdym razie dzięki
Sickest

2

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

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>


Wyjaśnij to, proszę!
Szabolcs Páll

1

Użyj właściwości translateY CSS, aby wyśrodkować tekst w jego kontenerze w pionie

<style>
.centertext{

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

}
</style>

A następnie zastosuj go do zawierającego DIV

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

Dostosuj wartość procentową translateY do swoich potrzeb. Mam nadzieję że to pomoże


1

Ten kod dotyczy pionowego wyrównania do środka i poziomego wyśrodkowania bez określania stałej wysokości:

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

Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.