Centering a span vertically and horizontally within a list item

Question

I'm having problems centering a span horizontally and vertically in a list item. It's just sticking in the top left corner. Here's my markup:

<ul id="folders">
    <li class="add"><span></span></li>
</ul>

I've set the span to vertical-align to middle, and set the list item text-align to center, but that doesn't help.

I've created a jsfiddle here: http://jsfiddle.net/Qfars/

Anyone know how I can center this?

Answer 1

To align your span on the center add the following to the css:

margin-left:auto;
margin-right:auto;

vertical-align doesn't work as you expect it to. It will work this way only in a table.

Here's more information about vertical-align, and how you can solve your vertical-align problem.