对齐图标旁边的文本

Question

所以我试图将这些图像彼此对齐，但我在这样做时遇到了问题。

我尝试了垂直对齐，但没有成功！

HTML:

<ul class="ex-links">
    <li><i class="fa fa-users"></i><a href="">About Us</a></li>
    <li><i class="fa fa-flag"></i><a href="">Events</a></li>
    <li><i class="fa fa-picture-o"></i><a href="">Gallery</a></li>
    <li><i class="fa fa-question-circle"></i><a href="">FAQ's</a></li>
    <li><i class="fa fa-archive"></i><a href="">Archive</a></li>
</ul>

CSS:

   .explore-links {
        margin-right: 15px;
    }

    .ex-links {
        padding: 5px;
    }

    .ex-links li {
        font-size: 16px;
        padding-bottom: 8px;
    }

显示内容：

基本上，我只是试图对齐图像旁边的文本（它显示的），但它们都沿着线进出。图标的大小是它这样做的原因，所以我想知道我将如何处理 CSS 以使其完美对齐，而不是根据图标缩进每个 li 行.

Fiddle

谢谢！

Answer 1

我的垂直对齐方法是使用以下样式：

.v-aligned-parent{
    position:relative;//Or absolute, just not static;
}
.v-aligned{
    position: absolute;
    top:50%;
    left: 0%;
    transform:translate(0%, -50%);
    -webkit-transform:translate(0%, -50%);
}

应用于您的fiddle（注意我还调整了一些填充）：

https://jsfiddle.net/d5xgfkn8/

Answer 2

您可以使用显示属性 table、table-row 和 table-cell

ul {
    display: table;
}
li{
    display: table-row;
}
i, a{
    display: table-cell;

}
a{

    padding-left: 10px;
}

检查这个 DEMO

对齐图标旁边的文本

Aligning text next to icons

html

css

font-awesome