在图标旁边对齐文本

Yabo 发表于 Dev

雅宝

因此，我尝试将这些图像彼此对齐，但是这样做很麻烦。

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

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根据图标缩进每一行。

小提琴

谢谢！

迪伦·瓦特

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

.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/

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。