wake-up-neo.com

CSS-Text für vertikale Ausrichtung innerhalb von li

Ich zeige die Anzahl der Felder in einer Reihe mit fester Höhe und Breite an, die aus den <li> -Tags ..__ generiert wurden. Jetzt muss ich den Text in der vertikalen Mitte ausrichten. Das CSS-Vertikal-Ausrichten hat möglicherweise keine Auswirkungen Mir fehlt etwas ???

Ich bin nicht auf der Suche nach Tricks (Rand, Polsterung, Zeilenhöhe). Diese funktionieren nicht, da Text teilweise lang ist und in zwei Zeilen aufgeteilt wird.

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>
84
AK4668

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

91
Asaf Chertkoff

Mit line-height richten Sie Text vertikal aus. Es ist ziemlich normal und ich betrachte es nicht als "Hack". Fügen Sie einfach line-height: 100px zu Ihrem ul.catBlock li hinzu und es wird in Ordnung sein.

In diesem Fall müssen Sie ihn möglicherweise zu ul.catBlock li a hinzufügen, da der gesamte Text in der li auch in einer a enthalten ist. Ich habe gesehen, dass einige seltsame Dinge passieren, wenn Sie dies tun. Versuchen Sie also beide und sehen Sie, welche davon funktioniert.

51
Logan Serman

Überraschenderweise (oder nicht) funktioniert das vertical-align-Tool für diesen Job tatsächlich am besten. Das Beste ist, dass kein Javascript erforderlich ist.

Im folgenden Beispiel positioniere ich die outer-Klasse in der Mitte des Körpers und die inner-Klasse in der Mitte der outer-Klasse.

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

Die vertikale Ausrichtung funktioniert, indem die Zentren nebeneinander liegender Elemente ausgerichtet werden. Das Anwenden der vertikalen Ausrichtung auf ein einzelnes Element bewirkt absolut nichts. Wenn Sie ein zweites Element hinzufügen, das keine Breite hat, aber der Höhe des Containers entspricht, wird Ihr einzelnes Element mit diesem Element ohne Breite vertikal zentriert und vertikal zentriert. Die einzige Voraussetzung ist, dass Sie beide Elemente auf Inline (oder Inline-Block) setzen und ihr vertikales Alignment auf vertical-align: middle setzen.

Hinweis: Möglicherweise bemerken Sie in meinem Code unten, dass sich mein <span>-Tag und <div>-Tag berühren. Da es sich bei beiden Elementen um Inline-Elemente handelt, fügt ein Leerzeichen tatsächlich ein Leerzeichen zwischen dem no-width-Element und Ihrem div ein Lass es aus.

15
Wex

In Zukunft wird dieses Problem von flexbox gelöst. Momentan ist die Browser-Unterstützung trostlos, aber sie wird in der einen oder anderen Form in allen aktuellen Browsern unterstützt.

Browser-Unterstü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 zur Flexbox: http://css-tricks.com/snippets/css/a-guide-to-flexbox/

10
Scott Joudry

So viele Jahre später diese Antwort auch immer sein mag, jeder, dem man begegnet, möchte vielleicht nur versuchen

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

Die Browser-Unterstützung für Flexbox ist weitaus besser als zuvor, als @scottjoudry seine Antwort oben veröffentlicht hat. Möglicherweise möchten Sie jedoch Präfixe oder andere Optionen in Betracht ziehen, wenn Sie versuchen, ältere Browser zu unterstützen. caniuse: flex

7
flyingace

Hier gibt es keine perfekten Antworten, außer der Antwort von Asaf, die weder Code noch Beispiele liefert. Ich möchte meinen Beitrag dazu leisten ...

Damit vertical-align: middle; funktioniert, müssen Sie display: table; für Ihr ul-Element und display: table-cell; für li-Elemente verwenden. Anschließend können Sie vertical-align: middle; für li-Elemente verwenden.

Sie müssen keine expliziten margins, paddings angeben, um Ihren Text vertikal in die Mitte zu bringen.

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;
}
5
Mr. Alien

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

In der Praxis erprobt, ist die zuverlässigste und dennoch eleganteste Lösung das Einfügen eines Assistent-Inline-Elements in das <li />-Element als erstes Kind, dessen Höhe auf 100% (von der Höhe des übergeordneten Elements, dem <li />) und dem vertical-align festgelegt werden sollte. auf Mitte stellen. Um dies zu erreichen, können Sie einen <span /> eingeben, aber die bequemste Methode ist die Verwendung der li:after-Pseudoklasse.

Bildschirmfoto:enter image description here

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

Probieren Sie diese Lösung aus

Funktioniert in den meisten Fällen am besten

sie müssen möglicherweise div anstelle von li verwenden

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

1
keshav

Einfache Lösung für vertikales Ausrichten 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;}
0
Fahad Ali