CSS vertikaler Ausrichtungstext innerhalb von li

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>

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

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.

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

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

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/

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

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:

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

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>

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