Testo di allineamento verticale CSS all'interno di li

Sto visualizzando il numero di caselle in una riga con altezza e larghezza fisse, generate dai tag <li>. ora ho bisogno di allineare il testo al centro verticale. L'allineamento verticale CSS non ha alcun impatto, forse mi manca qualcosa ???

Non sto cercando trucchi usando (margin, padding, line-height), questi non funzioneranno perché alcuni testi sono lunghi e si spezzeranno in due righe.

Trova il codice effettivo:

Codice CSS

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

Codice HTML

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

Definisci il genitore con display: tablee l'elemento stesso con vertical-align: middlee display: table-cell.

line-heightè come allineare verticalmente il testo. È piuttosto standard e non lo considero un "hack". Basta aggiungere line-height: 100pxal tuo ul.catBlock lie andrà bene.

In questo caso potresti doverlo aggiungere ul.catBlock li ainvece a poiché tutto il testo all'interno di liè anche all'interno di un file a. Ho visto accadere cose strane quando lo fai, quindi prova entrambi e vedi quale funziona.

Per quanto molti anni in ritardo questa risposta possa essere, chiunque si imbatta in questo potrebbe semplicemente voler provare

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

Il supporto del browser per flexbox è di gran lunga migliore di quando @scottjoudry ha pubblicato la sua risposta sopra, ma potresti comunque prendere in considerazione il prefisso o altre opzioni se stai cercando di supportare browser molto più vecchi. caniuse: flex

Sorprendentemente (o no), lo vertical-alignstrumento funziona effettivamente meglio per questo lavoro. La cosa migliore è che non è richiesto JavaScript.

Nell'esempio seguente, posiziono la outerclasse al centro del corpo e la innerclasse al centro del fileouter classe.

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

L'allineamento verticale funziona allineando i centri degli elementi che sono uno accanto all'altro. L'applicazione dell'allineamento verticale a un singolo elemento non fa assolutamente nulla. Se aggiungi un secondo elemento che non ha larghezza ma è l'altezza del contenitore, il tuo singolo elemento si sposterà verticalmente al centro con questo elemento senza larghezza, centrandolo quindi verticalmente. Gli unici requisiti sono che imposti entrambi gli elementi su inline (o inline-block) e il loro attributo di allineamento verticale suvertical-align: middle .

Nota: potresti notare nel mio codice qui sotto che il mio <span>tag e il <div>tag si toccano. Poiché sono entrambi elementi in linea, uno spazio aggiungerà effettivamente uno spazio tra l'elemento senza larghezza e il tuo div, quindi assicurati di lasciarlo fuori.

In futuro, questo problema verrà risolto da flexbox. In questo momento il supporto del browser è pessimo, ma è supportato in una forma o nell'altra in tutti i browser attuali.

Supporto browser: 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;
}

Sfondo su Flexbox: http://css-tricks.com/snippets/css/a-guide-to-flexbox/

Non ci sono risposte perfette fornite qui tranne la risposta di Asaf che non fornisce alcun codice né alcun esempio, quindi vorrei contribuire con il mio ...

Per poter vertical-align: middle;funzionare, devi usare display: table;per il tuo ulelemento e display: table-cell;per gli lielementi e poi puoi usare vertical-align: middle;per gli lielementi.

Non è necessario fornire alcun esplicito margins, paddingsper rendere il testo verticalmente al centro.

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

Come spiegato qui: https://css-tricks.com/centering-in-the-unknown/ .

Come testato nella pratica reale, la soluzione più affidabile ma elegante è inserire un elemento in linea assistente <li />nell'elemento come primo figlio, la cui altezza dovrebbe essere impostata al 100% (dell'altezza del genitore, il <li />), e la sua altezza vertical-alignal centro . Per ottenere ciò, puoi mettere a <span />, ma il modo più conveniente è usare la li:afterpseudo classe.

Immagine dello schermo:

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

Prova questa soluzione

Funziona meglio nella maggior parte dei casi

potresti dover usare div invece di li per quello

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

Soluzione semplice per l'allineamento verticale al centro ... per me funziona a meraviglia

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