Vertically center DIV inside LI without px-measure - html

Question

I am trying to make a list with square bullets in different colors with square size independant of the font size.
I need to use font sizes in em or %.
That's my best try so far: http://jsfiddle.net/3GMjp/29/
<ul>
<li>
<div>
<span class='li_box green'></span>
<span>Element 1</span>
</div>
</li>
<li>
<div>
<span class='li_box red'></span>
<span>Element 2</span>
</div>
</li>
<li>
<div>
<span class='li_box blue'></span>
<span>Element 3</span>
</div>
</li>
<ul>
css:
ul {
padding:0;
margin:0;
}
li {
font-size: 1.5em;
list-style-type:none;
line-height: 2em;
}
.li_box {
float:left;
width:10px;
height:10px;
vertical-align:middle;
margin-right:10px;
}
.red{ background-color:red}
.green{ background-color:green}
.blue{ background-color:blue}
Could someone help me to center the boxes without adding px-measures?
Any working solution (would be appreciated)!

Answer 1

See I have done modification in the CSS and HTML :
Please see URL : http://jsfiddle.net/3GMjp/33/
HTML code:
<li>
<div>
<span class='li_box green'></span>
<span class='spn'>Element 1</span>
</div>
</li>
CSS changes :
ul {
padding:0;
margin:0;
}
li {
font-size: 1.5em;
list-style-type:none;
line-height: 2em;
}
li div {
display:table;
}
.spn{
display:table-cell;
}
.li_box {
display:table-cell;
float:left;
width:10px;
height:10px;
vertical-align:middle;
margin-right:10px;
}
.red{ background-color:red}
.green{ background-color:green}
.blue{ background-color:blue}

Answer 2

I've updated your fiddle here.
If you float an element, it will become a block element, and thus vertical align won't work. The span with the text, unless floated as well, will wrap to the next line.
Inline block seems to work just fine:
.li_box {
display: inline-block;
width:10px;
height:10px;
margin-right:10px;
}

Answer 3

If you're simply looking to center the content of the divs, this should be all you need:
div { text-align: center; }

Answer 4

try to use this:
li {
...
text-align:center;
}

Answer 5

Adding margin top to .li_box will fix your issue.
.li_box {
...
margin-top: 1%;
}