对齐图像和图标（CSS / Bootstrap）

Question

我无法理解为什么我无法在简单图像和图标之间实现完美对齐。图标在顶部移动了一点。

代码，html：

    <div class="container specialfull">
    <div class="jumbotron">

        <div class="row">

            <div class="col-md-1 col-md-offset-11 star"><span class="glyphicon glyphicon-star">
                </span>

            </div>

        </div>
        <div class="row">

            <div class="col-md-6 col-md-offset-3 searchbox">
                <div class="row">
                    <img src="/assets/img/pen_tomato.png" style="display:inline;" height="48">
                    <i class="material-icons box">&#xE231;</i>  
                </div>
                <div class="row">

                </div>

            </div>

        </div>

    </div>
</div>

我有以下CSS：

html, body, header {
    height:100%;

}


.material-icons.box 
{ 
color: #FF7F02;
    font-size: 48px; 
    text-align: bottom;

}


.specialfull, .specialfull .jumbotron {
    height:60%;
    width:100%;
    background-color: #616170;

}
.star {
    text-align: right;
}

.glyphicon-star {
    font-size: 55px;
    color: #FF7F02;
}
.searchbox {
    padding-top: 5%;
    text-align: center;
    height: 180px;
}

我想简单地将第二个元素与第一个元素对齐。它看起来更像是div元素的顶部。 为什么？

Answer 1

vertical-align对于对齐inline或inline-block的兄弟姐妹很有用。在您的图标中添加vertical-align: middle似乎有效：

.material-icons.box 
{ 
    color: #FF7F02;
    font-size: 48px; 
    text-align: bottom;
    vertical-align: middle
}

在这里演示：http://codepen.io/anon/pen/qdYNwg

您可以尝试其他值，具体取决于您所遵循的确切对齐方式（例如bottom或top）