CSS vertikaler Ausrichtungstext innerhalb von li

99

Ich zeige die Anzahl der Felder in einer Reihe mit fester Höhe und Breite an, die aus <li> -Tags generiert wurden. Jetzt muss ich den Text in der vertikalen Mitte ausrichten. Die vertikale Ausrichtung des CSS hat keine Auswirkungen, vielleicht fehlt mir etwas ???

Ich suche keine Tricks mit (Rand, Abstand, Zeilenhöhe), diese funktionieren nicht, da einige Texte lang sind und in zwei Zeilen zerfallen.

Bitte finden Sie den aktuellen Code:

CSS-Code

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

HTML Quelltext

<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>
AK4668
quelle
2
Möglicherweise müssen Sie weitere Informationen angeben. Sind die Boxen gleich hoch? Richten Sie den Text in den Feldern im Li aus? "weil einige Texte lang sind ... zwei Zeilen" ??? Vielleicht hilft ein Screenshot oder eine Geige.
KMC
1
Ich habe gerade versucht, einen Screenshot zu veröffentlichen, aber das erlaubt mir nicht, da mein Konto neu ist.
AK4668

Antworten:

100

Definieren Sie das übergeordnete display: tableElement mit und das Element selbst mit vertical-align: middleund display: table-cell.

Asaf Chertkoff
quelle
4
+1 für die Verwendung von Anzeigetabelle / Tabellenzelle. Es scheint, dass sich nicht viele Menschen ihrer Existenz bewusst sind.
Powerbuoy
5
Dies ist von W3CSchool ... Hinweis: Die Werte "Inline-Tabelle", "Einlauf", "Tabelle", "Tabellenbeschriftung", "Tabellenzelle", "Tabellenspalte", "Tabellenspalte" group "," table-row "," table-row-group "und" inherit "werden in IE7 und früheren Versionen nicht unterstützt. IE8 benötigt einen! DOCTYPE. IE9 unterstützt die Werte.
AK4668
20
Diese Lösung ist zum Kotzen, da sie alle Randeffekte vollständig abschaltet. Die einzige Lösung hierfür besteht darin, Tonnen von Pseudoelementen herzustellen. Warum saugt CSS so viel.
Muhammad Umer
Was ist mit <li>einer einzigen Reihe?
polkovnikov.ph
1
Dies ist auch nicht CATO-kompatibel, wenn Sie tatsächlich KEINE tabellarischen Daten anzeigen.
Stevo Perisic
59

line-heightSo richten Sie Text vertikal aus. Es ist ziemlich normal und ich halte es nicht für einen "Hack". Fügen line-height: 100pxSie einfach zu Ihrem hinzu ul.catBlock liund es wird in Ordnung sein.

In diesem Fall müssen Sie es möglicherweise hinzufügen ul.catBlock li a stattdessen da sich der gesamte Text innerhalb von liauch innerhalb von befindet a. Ich habe einige seltsame Dinge gesehen, wenn Sie dies tun, also versuchen Sie beide und sehen Sie, welche funktioniert.

Logan Serman
quelle
21
Ich habe anfangs die Zeilenhöhe verwendet, aber wenn der Inhalt lang ist, wird er in zwei Zeilen aufgeteilt. Nehmen wir an, jede Zeile hat eine Lücke von 100 Pixel und wird dadurch schlechter aussehen. Gibt es einen anderen Weg?
AK4668
2
Ich denke, es gibt einen Weg zu haben, vertical-align: middlewenn Sie haben display: table-cell. Ich habe es aber nie benutzt. Werfen
Logan Serman
Tolle Lösung - Ich habe die Linienhöhe so eingestellt, dass sie meiner Mindesthöhe entspricht, und der Text ist vertikal ausgerichtet - zumindest nahe genug für eine visuelle Überprüfung. Die obige "Tabellen" -Lösung ist sicherlich nicht semantisch und von Natur aus hackisch. Jedes Mal, wenn wir dies tun, erhöhen wir die Wahrscheinlichkeit von fehlerhaften Anzeigen oder eigenartigem Verhalten irgendwo in der Reaktionslandschaft.
CodeFinity
Vielen Dank! Funktioniert hervorragend mit dem <a> -Element! Was für eine einfache Lösung :-) Passen Sie es einfach an den korrekten Wert an und es ist vertikal perfekt zentriert!
Asle
44

So viele Jahre zu spät diese Antwort auch sein mag, jeder, der darauf stößt, möchte es vielleicht einfach versuchen

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

Die Browserunterstützung für Flexbox ist weitaus besser als zu dem Zeitpunkt, als @scottjoudry seine Antwort oben veröffentlicht hat. Wenn Sie jedoch versuchen, viel ältere Browser zu unterstützen, sollten Sie dennoch Präfixe oder andere Optionen in Betracht ziehen. caniuse: flex

Flyingace
quelle
Dies spielt nicht gut mit list-style-imagein Chrome - das Bild verschwindet
Benjineer
1
Ich habe dies für das Bootstrap 4 Navi-Item verwendet und es hat perfekt funktioniert. Vielen Dank.
010110110101
Flexbox sparen live wie immer
Arthur Medeiros
16

Überraschenderweise (oder auch nicht) vertical-alignfunktioniert das Tool für diesen Job am besten. Das Beste ist, dass kein Javascript erforderlich ist.

Im folgenden Beispiel positioniere ich die outerKlasse in der Mitte des Körpers und die innerKlasse in der Mitte der outerKlasse.

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

Bei der vertikalen Ausrichtung werden die Zentren von Elementen ausgerichtet, die nebeneinander liegen. Das Anwenden der vertikalen Ausrichtung auf ein einzelnes Element bewirkt absolut nichts. Wenn Sie ein zweites Element hinzufügen, das keine Breite hat, aber die Höhe des Containers ist, wird Ihr einzelnes Element mit diesem Element ohne Breite vertikal zentriert und somit vertikal zentriert. Die einzigen Anforderungen sind, dass Sie beide Elemente auf Inline (oder Inline-Block) setzen und ihr vertikales Ausrichtungsattribut auf setzenvertical-align: middle .

Hinweis: Möglicherweise stellen Sie in meinem Code unten fest, dass sich mein <span>Tag und mein Tag <div>berühren. Da es sich bei beiden um Inline-Elemente handelt, wird durch ein Leerzeichen tatsächlich ein Leerzeichen zwischen dem Element ohne Breite und Ihrem div hinzugefügt. Lassen Sie es daher unbedingt weg.

Wex
quelle
1
Fantastisch, es macht einen guten Sinn. // Ich kann Ihre Antwort jetzt nicht abstimmen, da mein
Mindestruf
1
Für diejenigen von Ihnen, die nach dieser Technik suchen, die direkt auf die Frage angewendet wird - jsfiddle.net/utGVt/385
Wex
15

In Zukunft wird dieses Problem durch Flexbox gelöst. Derzeit ist die Browserunterstützung düster, wird jedoch in der einen oder anderen Form in allen aktuellen Browsern unterstützt.

Browserunterstützung: 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;
}

Hintergrundinformationen zu Flexbox: http://css-tricks.com/snippets/css/a-guide-to-flexbox/

Scott Joudry
quelle
1
Zu dem Zeitpunkt, als diese Frage gestellt wurde, bin ich mir nicht sicher, ob dies eine gute Antwort gewesen wäre, aber heute sehen wir ~ 95% Unterstützung mit Präfixen, daher denke ich, dass dies eine praktikable Option ist.
Wex
Wenn Sie möchten, dass die <li> -Elemente umbrochen werden (anstatt verkleinert zu werden), fügen Sie flex-wrap hinzu: wrap; auf <ul> Niveau
Thierry
Welches Element füge ich dieser Klasse hinzu?
Matt M.
6

Hier gibt es keine perfekten Antworten, außer Asafs Antwort, die weder Code noch ein Beispiel enthält. Deshalb möchte ich meine ...

Damit die vertical-align: middle;Arbeit funktioniert, müssen Sie sie display: table;für Ihr ulElement und display: table-cell;für liElemente verwenden und dann vertical-align: middle;für liElemente.

Sie brauchen keine explizite bereitzustellen margins, paddingsIhren Text vertikal Mitte zu machen.

Demo

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;
}
Mr. Alien
quelle
Dies hilft nicht, da der einzige Grund, warum es vertikal ausgerichtet wurde, darin besteht, dass Sie es mit Polsterung auf dem a-Tag nach
unten gedrückt haben
@ Mr.Alien Ich werde jedoch wiederholen, dass das einzige Problem bei dieser Lösung darin besteht, dass Randregeln ignoriert werden.
Thomas
4

Wie hier erklärt: https://css-tricks.com/centering-in-the-unknown/ .

Wie in der Praxis getestet, besteht die zuverlässigste und eleganteste Lösung darin, als erstes <li />Kind ein unterstützendes Inline-Element in das Element einzufügen , dessen Höhe auf 100% (der Größe des Elternteils, des <li />) und dessen vertical-alignMitte eingestellt werden sollte . Um dies zu erreichen, können Sie eine setzen <span />, aber der bequemste Weg ist die Verwendung einer li:afterPseudoklasse.

Bildschirmfoto: Geben Sie hier die Bildbeschreibung ein

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;
}
Jeff Tian
quelle
1

Probieren Sie diese Lösung aus

Funktioniert in den meisten Fällen am besten

Sie können verwenden , haben div statt li dafür

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

keshav
quelle
1
Warum braucht dies einen DivHelper, um vertikal auszurichten? Ich habe es zu einem anderen Thema gesehen, aber ich kann nicht verstehen, warum es sich nicht ohne ein anderes Div ausrichtet.
Sasha Chirico
0

Einfache Lösung für die vertikale Ausrichtung in der Mitte ... für mich funktioniert es wie ein Zauber

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;}
Fahad Ali
quelle