Question

我正在使用线性图片，我试图将图标与文本对齐（垂直），我只是无法弄明白。不知何故，图标不会像文字一样粘在导航栏的顶部，所以我认为这可能是问题所在。这是一张图片，向您展示我正在谈论的内容 - ＆gt;

http://i.imgur.com/fwX8fHM.png

我正在尝试将图标与文本垂直对齐，然后使用导航栏将整个菜单对齐。我希望你们能理解。

这是HTML：

.top-bar {
margin-bottom: 0;
border: none;
background-color: #9E87FF;
color: #fff;
height: 50px;
}

.navbar .divider-vertical {
    height: 50px;
    margin: 0 9px;
    border-left: 1px solid #ffffff;
    border-right: 1px solid #ffffff;
}

.infos-text {
    display: inline-block;
}

.infos .infos-icons {
    padding-right: 10px;
    font-size: 20px;
    vertical-align: middle;
    display: inline-block;
}

我尝试对齐后的CSS：

TestFold.pdf

Answer 1

使用此CSS

.top-bar {
    margin-bottom: 0;
    border: none;
    background-color: #9E87FF;
    color: #fff;
    height: 50px;
    display: table-cell;
    vertical-align: middle;
}

.navbar .divider-vertical {
    height: 50px;
    margin: 0 9px;
    border-left: 1px solid #ffffff;
    border-right: 1px solid #ffffff;
}

.infos-text {
    display: inline-block;

}

.infos .infos-icons {
    padding-right: 10px;
    font-size: 20px;       
    display: inline-block;      
}

图标与文本对齐

1 个答案: