Question

为什么vertical-align: middle;没有将图标与标题的中间对齐？

＆＃13;

    .custom {
        color: white;
        vertical-align: middle;
    }
    .header {
        width: 100%;
        height: 40px;
        background: rgb(40,40,40);
    }

＆＃13;

<link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet"/>
<div class="header">
    <i class="fa fa-facebook custom" aria-hidden="true"></i>
    <i class="fa fa-twitter custom" aria-hidden="true"></i>
    <i class="fa fa-instagram custom" aria-hidden="true"></i>
    <i class="fa fa-google-plus custom" aria-hidden="true"></i>
</div>

＆＃13;

Answer 1

.custom {
    color: white;
    vertical-align: middle;
    **line-height: 40px;**
}

Answer 2

这些天，垂直对齐的最佳方法是使用flexbox。另见：

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

https://philipwalton.github.io/solved-by-flexbox/demos/vertical-centering/

.custom {
        color: white;
        vertical-align: middle;
    }

.header {
  
  display:flex;
  align-items: center;

        width: 100%;
        height: 40px;
        background: rgb(40,40,40);
    }

<link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet"/>
<div class="header">
    <i class="fa fa-facebook custom" aria-hidden="true"></i>
    <i class="fa fa-twitter custom" aria-hidden="true"></i>
    <i class="fa fa-instagram custom" aria-hidden="true"></i>
    <i class="fa fa-google-plus custom" aria-hidden="true"></i>
</div>

Answer 3

为.custom margin-top=2.5%或margin=2.5%提供一些保证金，它会起作用。

另一方面，如果你有类似的东西，vertical-align也会有效;

<a class="header">
    <i class="fa fa-facebook custom" aria-hidden="true"></i>
</a>

Answer 4

它不起作用的原因是因为你已经提到高度移除高度它将与中间对齐，而不是高度使用父类的填充，为它的标题。

.custom {
    color: white;
    vertical-align: middle;
}
.header {
    width: 100%;
    padding:20px;
    background: rgb(40,40,40);
}

Fontawasome垂直图标对齐

4 个答案: