it-swarm-pt.tech

Texto de alinhamento vertical CSS dentro li

Estou exibindo o número de caixas em uma linha com altura e largura fixas, geradas a partir de tags <li>. Agora preciso alinhar o texto no centro vertical. O alinhamento vertical do CSS tem sem impacto, talvez eu esteja perdendo alguma coisa ???

Eu não estou procurando por truques usando (margem, preenchimento, altura de linha), estes não funcionarão porque algum texto é longo e vai quebrar em duas linhas.

Por favor, encontre o código atual:

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

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

91
Asaf Chertkoff

line-height é como você alinha verticalmente o texto. É bastante normal e não o considero um "hack". Apenas adicione line-height: 100px ao seu ul.catBlock li e tudo ficará bem.

Nesse caso, você pode ter que adicioná-lo a ul.catBlock li a, já que todo o texto dentro da li também está dentro de uma a. Eu vi algumas coisas estranhas acontecerem quando você faz isso, então tente ambas e veja qual delas funciona.

51
Logan Serman

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

No exemplo a seguir, estou posicionando a classe outer no meio do corpo e a classe inner no meio da classe outer.

Pré-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 próximos um do outro. Aplicar alinhamento vertical a um único elemento não faz absolutamente nada. Se você adicionar um segundo elemento que não tenha largura, mas que seja a altura do contêiner, seu único elemento se moverá para o centro vertical com esse elemento sem largura, centralizando-o verticalmente. Os únicos requisitos são que você defina os dois 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 tag <span> e tag <div> estão sendo tocadas. Como eles são elementos inline, um espaço realmente adicionará um espaço entre o elemento no-width e seu div, então certifique-se de deixe de fora.

15
Wex

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

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

Plano de fundo no Flexbox: http://css-tricks.com/snippets/css/a-guide-to-flexbox/

10
Scott Joudry

No entanto, muitos anos atrasado esta resposta pode ser, alguém que vem através deste pode apenas querer tentar

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

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

7
flyingace

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

Para fazer vertical-align: middle; funcionar, você precisa usar display: table; para seu elemento ul e display: table-cell; para elementos li e então você pode usar vertical-align: middle; para elementos li.

Você não precisa fornecer nenhuma margins, paddings explícita para 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;
}
5
Mr. Alien

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

Como testado na prática real, a solução mais confiável e elegante é inserir um elemento assistencial embutido no elemento <li /> como o primeiro filho, cuja altura deve ser definida como 100% (da altura de seus pais, o <li />) e seu vertical-align definido para o meio. Para conseguir isso, você pode colocar um <span />, mas a maneira mais conveniente é usar a classe pseudo li:after.

Captura de tela: 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

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>

1
keshav

Solução simples para alinhamento vertical médio ... para mim funciona como um encanto 

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