垂直对齐在内联块中不起作用 [英] vertical-align doesn't work in inline-block

问题描述

但是，这是行不通的。

我应该能够垂直居中文本，当我将文本放入内嵌块时，对吗？

这段代码怎么不起作用，我怎么才能使它工作！ ？

请帮助我！

预先感谢您：

HTML

 < ul class =socialBlock> 
< li class =socialBlock__item> tw< / li> 
< li class =socialBlock__item> fb< / li> 
< li class =socialBlock__item> g +< / li> 
 
< / ul> 
  

CSS

  .socialBlock {
 padding：10px; 
背景：黄色; 
 list-style：none; 
} 
 
 .socialBlock__item {
 margin：0; 
 padding：0; 
 display：inline-block; 
背景：绿色; 
 height：44px; 
 vertical-align：middle; 
} 
  

Codeopen $ b

http://codepen.io/anon/pen/DihFw

解决方案

垂直对齐内联元素的技巧是让一个更大的内联元素与它们对齐。我发现使用display table和display table-cell更容易（通常table-cell已经足够了，但是您可能需要在父元素上使用display table，具体取决于您想要实现的内容：

  .socialBlock_item {
 margin：0; 
 padding：0; 
 display：table-cell; 
 background：green; 
 height：44px; 
 vertical-align：middle / *您仍然想要使用它* / 
} 
  

I'd like to center text vertically.

But, this doesn't work.

I should be able to center text vertically when I place text in inline-block, right?

How come this code doesn't work and how can I make it work!?

Please help me out!

Thank you in advance :)

HTML

<ul class="socialBlock">
            <li class="socialBlock__item">tw</li>
            <li class="socialBlock__item">fb</li>
            <li class="socialBlock__item">g+</li>

</ul>

CSS

.socialBlock {
padding:10px;
background: yellow;
list-style: none;
}

.socialBlock__item {
margin:0;
padding:0;
display: inline-block;
background: green;
height:44px;
vertical-align: middle;
}

Codeopen

http://codepen.io/anon/pen/DihFw

解决方案

The trick with vertically aligning inline elements is to have a larger, inline element to align them with. What I find works a lot easier is to use display table and display table-cell (often table-cell is enough, but you may need to use display table on the parent element depending on what you're trying to achieve:

.socialBlock_item {
    margin: 0;
    padding: 0;
    display: table-cell;
    background: green;
    height: 44px;
    vertical-align: middle /* you still want to use this as well */
}

这篇关于垂直对齐在内联块中不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！