Fred J. Fred J. - 1 year ago 59
CSS Question

make inline list items certain width

I have the list items with image on the left and text on the right. Since each image is not exactly the same width, the text don't align vertically.

How can I make it so that the labels align vertically, each to the right of its image? Thanks

.checks-row {
display: inline-block;

.checks-row li {
display: inline;

.check-image {
width: 4em;

<ul class="checks-row">
<li class="check-image">
<img src="/{{this.image}}.gif">
<li class="check-label">{{this.label}}</li>

Answer Source

Use following css:

.checks-row li {
    vertical-align: middle;
    display: inline-block;
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download