Vertical menu with images: align the first character of the items - css

Question

I have a vertical menu. I would like to align vertically the name of the of items. I have this:
li {
list-style: none;
}
ul {
padding: 0;
}
img {
vertical-align: middle;
}
<ul>
<li>
<a href="#">
<img src="http://sermovi.es/images/car95.svg" />
<span>Cars</span>
</a>
</li>
<li>
<a href="#">
<img src="http://sermovi.es/images/restaurant95.svg" />
<span>Restaurants</span>
</a>
</li>
</ul>
The result is like this:
but I want this:
http://jsfiddle.net/o404phzt/

Answer 1

You could put the image in a fixed-width div:
li {
list-style: none;
}
ul {
padding: 0;
}
.menu-item {
display: inline-block;
width: 100px;
text-align: center;
}
img {
vertical-align: middle;
}
<ul>
<li>
<a href="#">
<div class="menu-item">
<img src="http://sermovi.es/images/car95.svg" />
</div>
<span>Cars</span>
</a>
</li>
<li>
<a href="#">
<div class="menu-item">
<img src="http://sermovi.es/images/restaurant95.svg" />
</div>
<span>Restaurants</span>
</a>
</li>
</ul>

Answer 2

You can try CSS tables:
ul {
padding: 0;
display: table;
}
ul > li {
display: table-row;
}
ul > li > * {
vertical-align: middle;
display: table-cell;
}
<ul>
<li>
<img src="http://sermovi.es/images/car95.svg" />
<span>Cars</span>
</li>
<li>
<img src="http://sermovi.es/images/restaurant95.svg" />
<span>Restaurants</span>
</li>
</ul>
Note I removed the links because they interfere with the layout.
However, since you use <a href="#">, you are probably handling them with JS. Then, you can just remove them, do the same click handling with JS, and fake links with CSS:
ul {
padding: 0;
display: table;
}
ul > li {
display: table-row;
color: blue;
cursor: pointer;
}
ul > li:hover {
text-decoration: underline;
}
ul > li > * {
vertical-align: middle;
display: table-cell;
}
<ul>
<li>
<img src="http://sermovi.es/images/car95.svg" />
<span>Cars</span>
</li>
<li>
<img src="http://sermovi.es/images/restaurant95.svg" />
<span>Restaurants</span>
</li>
</ul>

Answer 3

Probably the easiest way is to create a 2x2 table and not using lists.
<table>
<tr>
<td>
<img src="http://sermovi.es/images/car95.svg" />
</td>
<td>
<span>Cars</span>
</td>
</tr>
<tr>
<td>
<img src="http://sermovi.es/images/restaurant95.svg" />
</td>
<td>
<span>Restaurants</span>
</td>
</tr>
</table>
You can still use classes inside the td tag as needed. (aligning for example).

Answer 4

Structuring the image and spans inside inline-block divs will solve this flexibly:
li {
list-style: none;
}
ul {
padding: 0;
}
img {
vertical-align: middle;
}
li {
width: 300px;
}
li div {
display: inline-block;
}
.image {
width: 50%;
text-align: center;
}
.text {
width: 50%;
}
<ul>
<li>
<a href="#">
<div class="image">
<img src="http://sermovi.es/images/car95.svg" />
</div>
<div class="link">
<span>Cars</span>
</div>
</a>
</li>
<li>
<a href="#">
<div class="image">
<img src="http://sermovi.es/images/restaurant95.svg" />
</div>
<div class="link">
<span>Restaurants</span>
</div>
</a>
</li>
</ul>
Fiddle