Wyśrodkuj jedno-i wielowierszowy tekst li w pionie

Question

Wyśrodkuj jedno-i wielowierszowy tekst li w pionie

Mam nieuporządkowaną listę z zestawem obrazków tła. Wszystkie elementy listy mają tę samą wysokość, obraz tła jest umieszczony na środku po lewej stronie.

Tekst każdego elementu powinien być wyśrodkowany pionowo do li. działa to dobrze z tekstem jednowierszowym (ustawiając wysokość linii zgodnie z wysokością li), ale nie z dwoma liniami tekstu.

Mógłbym dodać "line-height: normal" do elementu dwuliniowego, ale chcę rozwiązania, które działa dla wszystkich pozycji.

Jak mogę to zrobić?

Przykład:

li { 
    list-style-type:none; 
    padding-left:40px; 
    height:36px;
    line-height:36px; 
    background:url('tick.png') no-repeat 0 50%; 
}

18

list css center

Author: Raphael Müller, 2010-11-04

Source

2 answers

li {
    height:200px; 
    line-height:200px;
    border:1px solid red;
}
li span {
    vertical-align:middle; 
    display:inline-block; 
    line-height:1.2;
}

<li>
    <span>two<br />lines</span>
</li>

Powinno zadziałać.

EDIT: updated to see changes

3

Author: MatTheCat,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2010-11-04 09:52:00

score 44 · Accepted Answer

Jest to rozwiązanie najbardziej crossbrowser

li {
    width           : 200px;
    line-height     : 100px;
    height          : 100px;
    border          : 1px blue solid;        
}
li span {
    display             : -moz-inline-box;  /* FF2 or lower */
    display             : inline-block;     /* FF3, Opera, Safari */
    line-height         : normal;
    vertical-align      : middle;    
}

li span     { *display  : inline;} /* haslayout for IE6/7 */

Html

<ul>
   <li><span>My text</span></li>
   <li><span>My longer text</span></li>
   <li><span>My text, but this time is really wide</span></li>
   <li><span>My text, some thoughts about how much it will expand in this item.</span></li>
</ul>

Użyłem star hack dla zwięzłości, należy unikać. Wystarczy użyć rozwiązania html5boilerplate, używa warunkowych komentarzy do tagu body