Center Single-und Multi-Line-Li-Text vertikal

Ich habe eine ungeordnete Liste mit einem Hintergrundbild-Set. Alle Listenelemente haben die gleiche Höhe, das Hintergrundbild befindet sich links in der Mitte.Center Single-und Multi-Line-Li-Text vertikal

Der Text jedes Artikels sollte zentriert vertikal auf der Li sein. Dies funktioniert gut mit einzeiligen Text (indem Sie die Zeilenhöhe entsprechend der Höhe des Li einstellen), aber nicht mit zwei Zeilen Text.

Ich könnte "line-height: normal" zu dem zweizeiligen Element hinzufügen, aber ich möchte eine Lösung, die für alle Elemente funktioniert.

Wie kann ich das tun?

Beispiel:

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

Quelle

2010-11-04 Raphael Müller

Haben Sie etwas Code, den wir sehen können? Es ist viel besser für uns, wenn Sie posten können, was Sie bisher versucht haben :) – Kyle

in welchem Browser müssen Sie es funktioniert? Auch IE6/7? –

Ein CSS-Beispiel: li { Listenart-Typ: keine; padding-links: 40px; Höhe: 36px; Zeilenhöhe: 36px; Hintergrund: URL ('tick.png') keine Wiederholung 0 50%; } Wenn ich eine Zeile Text in der li habe, funktioniert es, aber mit zwei Zeilen tut es nicht. –

dies ist eine sehr cross Lösung

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>

I Stern der Kürze halber Hack verwendet, sollten Sie vermeiden. Verwenden Sie einfach html5boilerplate Lösung, verwendet es bedingte Kommentare auf body-Tag

Quelle

2010-11-04 10:09:56

Danke dafür , absolut die beste Lösung, die ich gefunden habe, was für ein Held! – DanC

Besser funktioniert ohne feste Höhe, 'Höhe: 100px;' in diesem Beispiel. Mehr Zeilen Text Größe ändern. Verwenden Sie 'padding' oder' margin', um die erforderlichen Lücken oben und unten zu definieren. Meine Frage ist, existiert hier Lösung ohne Umspannweite? –

Leider gibt es einen Fehler mit IE (zumindest mit IE9); Wenn Sie den Listenstil festlegen: None, springt er zurück an die Spitze. Entweder sitzt mein Text dumm oben auf dem Bildschirm, oder ich habe einen hässlichen Punkt, den ich nicht loswerden kann. Danke nochmal, IE. – Inigo

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>

sollte es funktionieren.

EDIT: aktualisiert, um Änderungen zu sehen

Quelle

2010-11-04 09:36:00 MatTheCat

Beispiel: http://jsfiddle.net/Kyle_Sevenoaks/STM5q/ – Kyle

Hinzugefügt einige Vereisung zu Kyles Beispiel jsfiddle: http://jsfiddle.net/STM5q/155/ –

Center Single-und Multi-Line-Li-Text vertikal

Antwort

Verwandte Themen