在图标旁边对齐文本

Question

So I'm trying to align these images next to each other but I'm having trouble doing so.

I tried a vertical-align however wasn't successful at it!

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

What it shows:

Basically, I'm simply trying to align the text next to the image (Which it shows) but they all go in and out down the line. The sizing of the icons are why it's doing that, so I was wondering how I'd go about tackling the CSS to where it all aligns perfect, rather than indenting for every li row based on the icon.

Fiddle

thanks!

Answer 1

My go to method for vertical aligning is using the followng styles:

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

As applied to your fiddle (note i also tweaked some paddings):

https://jsfiddle.net/d5xgfkn8/

Answer 2

You can use display properties table , table-row and table-cell

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

}
a{

    padding-left: 10px;
}

Checkout this DEMO