Wyrównanie tekstu CSS w pionie wewnątrz li

Wyświetlam liczbę pól w rzędzie z ustaloną wysokością i szerokością, wygenerowaną z tagów <li>. teraz muszę wyrównać tekst do środka w pionie. Wyrównanie w pionie CSS nie ma wpływu, może coś mi brakuje ???

Nie szukam trików z użyciem (margines, dopełnienie, wysokość linii), te nie zadziałają, ponieważ niektóre teksty są długie i podzielą się na dwie linie.

Znajdź aktualny kod:

Kod CSS

ul.catBlock{
  width:960px; 
  height: 270px; 
  border:1px solid #ccc; 
}

ul.catBlock li{
  list-style: none; 
  float:left; 
  display:block; 
  text-align: center; 
  width:160px; 
  height: 100px;
}

ul.catBlock li a{ 
  display: block;  
  padding: 30px 10px 5px 10px; 
  height:60px;
}

Kod HTML

<ul class="catBlock">
 <li><a href="#">IP Phone</a></li>
 <li><a href="#">Dual SIM Switch Server</a></li>
 <li><a href="#">IP PBX</a></li>
</ul>

Zdefiniuj rodzica za pomocą display: tablei sam element za pomocą vertical-align: middlei display: table-cell.

line-heightto sposób wyrównania tekstu w pionie. Jest to dość standardowe i nie uważam tego za „hack”. Po prostu dodaj line-height: 100pxdo swojego ul.catBlock lii wszystko będzie dobrze.

W takim przypadku może być konieczne dodanie go ul.catBlock li azamiast tego, ponieważ cały tekst wewnątrz liznajduje się również wewnątrz pliku a. Widziałem kilka dziwnych rzeczy, kiedy to robisz, więc spróbuj obu i zobacz, która działa.

Jakkolwiek wiele lat opóźni się ta odpowiedź, każdy, kto się z tym spotka, może po prostu spróbować

li {
    display: flex;
    flex-direction: row;
    align-items: center;
}

Obsługa przeglądarki flexbox jest znacznie lepsza niż wtedy, gdy @scottjoudry opublikował swoją odpowiedź powyżej, ale nadal możesz rozważyć prefiksowanie lub inne opcje, jeśli próbujesz obsługiwać znacznie starsze przeglądarki. caniuse: flex

Zaskakujące (lub nie) vertical-alignnarzędzie faktycznie sprawdza się najlepiej w tym zadaniu. A co najlepsze, nie jest wymagany Javascript.

W poniższym przykładzie umieszczam outerklasę w środku ciała, a innerklasę w środku outerklasy.

Podgląd: http://jsfiddle.net/tLkSV/513/

HTML:

<div id="container">
    <span></span><div class="outer">
        <span></span><div class="inner">

        </div>
    </div>
</div>

CSS:

html, body {
    height: 100%;
    margin: 0;
    padding: 0; }
#container {
    text-align: center;
    height: 100%; }
span { 
    height: 100%;
    vertical-align: middle;
    display: inline-block; }
.outer {
    width: 100px;
    height: 200px;
    padding: 0;
    border: 1px solid #000;
    vertical-align: middle;
    display: inline-block; }
.inner {
    background: red;
    width: 30px;
    height: 20px;    
    vertical-align: middle;
    display: inline-block; }

Wyrównanie w pionie polega na wyrównaniu środków elementów, które są obok siebie. Zastosowanie wyrównania w pionie do pojedynczego elementu nie daje absolutnie nic. Jeśli dodasz drugi element, który nie ma szerokości, ale jest wysokością kontenera, pojedynczy element przesunie się do środka w pionie z tym elementem bez szerokości, a tym samym wyśrodkuje go w pionie. Jedyne wymagania to ustawienie obu elementów na inline (lub inline-block) i ustawienie ich atrybutu vertical-align na vertical-align: middle.

Uwaga: w moim kodzie poniżej możesz zauważyć, że mój <span>tag i <div>tag stykają się. Ponieważ oba są elementami wbudowanymi, spacja faktycznie doda spację między elementem bez szerokości a elementem div, więc pamiętaj, aby go pominąć.

W przyszłości ten problem zostanie rozwiązany przez flexbox. Obecnie obsługa przeglądarek jest fatalna, ale jest obsługiwana w takiej czy innej formie we wszystkich obecnych przeglądarkach.

Obsługa przeglądarek: http://caniuse.com/flexbox

.vertically_aligned {

    /* older webkit */
    display: -webkit-box;
    -webkit-box-align: center;
    -webkit-justify-content: center;

    /* older firefox */
    display: -moz-box;
    -moz-box-align: center;
    -moz-box-pack: center;

    /* IE10*/
    display: -ms-flexbox;
    -ms-flex-align: center;
    -ms-flex-pack: center;

    /* newer webkit */
    display: -webkit-flex;
    -webkit-align-items: center;
    -webkit-box-pack: center;

    /* Standard Form - IE 11+, FF 22+, Chrome 29+, Opera 17+ */
    display: flex;
    align-items: center;
    justify-content: center;
}

Informacje o Flexbox: http://css-tricks.com/snippets/css/a-guide-to-flexbox/

Nie ma tutaj doskonałych odpowiedzi poza odpowiedzią Asafa, która nie zawiera żadnego kodu ani żadnego przykładu, więc chciałbym wnieść swój ...

Aby vertical-align: middle;działać, musisz użyć display: table;dla swojego ulelementu i display: table-cell;dla lielementów, a potem możesz użyć vertical-align: middle;dla lielementów.

Nie musisz podawać żadnych wyraźnych informacji margins, paddingsaby tekst był ustawiony pionowo na środku.

Próbny

ul.catBlock{
    display: table;
    width:960px; 
    height: 270px; 
    border:1px solid #ccc; 
}

ul.catBlock li {
    list-style: none;
    display: table-cell; 
    text-align: center; 
    width:160px; 
    vertical-align: middle;
}

ul.catBlock li a { 
    display: block;
}

Jak wyjaśniono tutaj: https://css-tricks.com/centering-in-the-unknown/ .

Jak zostało przetestowane w praktyce, najbardziej niezawodnym, ale eleganckim rozwiązaniem jest wstawienie pomocniczego elementu inline do <li />elementu jako pierwszego dziecka, którego wysokość należy ustawić na 100% (wzrostu jego rodzica, the <li />) i vertical-alignustawić na środek . Aby to osiągnąć, możesz wstawić a <span />, ale najwygodniejszym sposobem jest użycie li:afterpseudoklasy.

Zrzut ekranu:

ul.menu-horizontal {
    list-style-type: none;
    margin: 0;
    padding: 0;
    display: inline-block;
    vertical-align: middle;
}

ul.menu-horizontal:after {
    content: '';
    clear: both;
    float: none;
    display: block;
}

ul.menu-horizontal li {
    padding: 5px 10px;
    box-sizing: border-box;
    height: 100%;
    cursor: pointer;
    display: inline-block;
    vertical-align: middle;
    float: left;
}

/* The magic happens here! */
ul.menu-horizontal li:before {
    content: '';
    display: inline;
    height: 100%;
    vertical-align: middle;
}

Wypróbuj to rozwiązanie

Działa najlepiej w większości przypadków

Może trzeba użyć div zamiast li za to

.DivParent {
    height: 100px;
    border: 1px solid lime;
    white-space: nowrap;
}
.verticallyAlignedDiv {
    display: inline-block;
    vertical-align: middle;
    white-space: normal;
}
.DivHelper {
    display: inline-block;
    vertical-align: middle;
    height:100%;
}

<div class="DivParent">
    <div class="verticallyAlignedDiv">
        <p>Isnt it good!</p>
     
    </div><div class="DivHelper"></div>
</div>

Proste rozwiązanie do wyrównywania w pionie środka ... u mnie działa jak urok

ul{display:table; text-align:center; margin:0 auto;}
li{display:inline-block; text-align:center;}
li.items_inside_li{display:inline-block; vertical-align:middle;}