Texto de alinhamento vertical CSS dentro de li

Estou exibindo várias caixas em uma linha com altura e largura fixas, geradas a partir de <li> tags. agora preciso alinhar o texto no centro vertical. O alinhamento vertical do CSS não tem impacto, talvez eu esteja faltando alguma coisa ???

Não estou procurando truques usando (margem, preenchimento, altura da linha), eles não funcionarão porque alguns textos são longos e se quebram em duas linhas.

Encontre o código real:

Código 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;
}

Código 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>

Defina o pai com display: tablee o próprio elemento com vertical-align: middlee display: table-cell.

line-heighté como você alinha o texto verticalmente. É bastante normal e não o considero um "hack". Basta adicionar line-height: 100pxao seu ul.catBlock lie tudo ficará bem.

Nesse caso, pode ser necessário adicioná-lo a, ul.catBlock li apois todo o texto dentro de litambém está dentro de um a. Já vi coisas estranhas acontecerem quando você faz isso, então tente as duas e veja qual delas funciona.

Por mais anos que esta resposta possa estar atrasada, qualquer pessoa que encontrar isso pode apenas querer tentar

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

O suporte do navegador para flexbox é muito melhor do que era quando @scottjoudry postou sua resposta acima, mas você ainda pode querer considerar prefixar ou outras opções se estiver tentando oferecer suporte a navegadores muito mais antigos. caniuse: flex

Surpreendentemente (ou não), a vertical-alignferramenta realmente funciona melhor para esse trabalho. O melhor de tudo é que nenhum Javascript é necessário.

No exemplo a seguir, estou posicionando a outerclasse no meio do corpo e a innerclasse no meio da outerclasse.

Visualização: 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; }

O alinhamento vertical funciona alinhando os centros dos elementos que estão próximos uns dos outros. Aplicar o alinhamento vertical a um único elemento não faz absolutamente nada. Se você adicionar um segundo elemento que não tem largura, mas é a altura do contêiner, seu único elemento se moverá para o centro vertical com este elemento sem largura, centralizando-o verticalmente. Os únicos requisitos são que você defina ambos os elementos como inline (ou inline-block) e defina seu atributo de alinhamento vertical como vertical-align: middle.

Nota: Você pode notar no meu código abaixo que minha <span>tag e <div>tag estão se tocando. Como ambos são elementos inline, um espaço adicionará um espaço entre o elemento no-width e seu div, portanto, certifique-se de deixá-lo de fora.

No futuro, esse problema será resolvido pelo flexbox. No momento, o suporte do navegador é desanimador, mas é compatível de uma forma ou de outra em todos os navegadores atuais.

Suporte para navegador: 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;
}

Histórico do Flexbox: http://css-tricks.com/snippets/css/a-guide-to-flexbox/

Não há respostas perfeitas fornecidas aqui, exceto a resposta de Asaf que não fornece nenhum código ou exemplo, então eu gostaria de contribuir com a minha ...

Para fazer vertical-align: middle;funcionar, você precisa usar display: table;para seu ulelemento e display: table-cell;para lielementos e do que pode usar vertical-align: middle;para lielementos.

Você não precisa fornecer nenhum conteúdo explícito margins, paddingspara tornar seu texto verticalmente no meio.

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

Conforme explicado aqui: https://css-tricks.com/centering-in-the-unknown/ .

Conforme testado na prática real, a solução mais confiável, porém elegante, é inserir um elemento embutido auxiliar no <li />elemento como o primeiro filho, cuja altura deve ser definida como 100% (da altura de seu pai, o <li />), e seu vertical-aligndefinido como meio . Para fazer isso, você pode colocar um <span />, mas a maneira mais conveniente é usar a li:afterpseudo classe.

Captura de tela:

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

Experimente esta solução

Funciona melhor na maioria dos casos

você pode ter que usar div em vez de li para isso

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

Solução simples para o alinhamento vertical do meio ... para mim, funciona perfeitamente

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