对齐图标旁边的文本

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%);
}

适用于你的小提琴（注意我也调整了一些填充）：

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