Вертикально центр DIV внутри LI без px-меры

Question

Я пытаюсь составить список с квадратными пулями разных цветов с квадратным размером, не зависящим от размера шрифта.

Мне нужно использовать размеры шрифтов в em или%.

Это моя лучшая попытка до сих пор: 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} 

Может кто-нибудь помочь мне в центр коробки без добавления точек-мер?

Любое рабочее решение (будет оценено)!

Answer 1

Если вы просто хотите центрировать содержание div с, это должно быть все, что вам нужно:

div { text-align: center; } 

Answer 2

Смотрите, я сделал изменения в CSS и HTML:

Пожалуйста, см URL: http://jsfiddle.net/3GMjp/33/

HTML код:

<li> 
     <div> 
      <span class='li_box green'></span> 
      <span class='spn'>Element 1</span> 
     </div> 
    </li> 

CSS изменения:

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 3

пытается использовать это:

li { 
    ... 
    text-align:center; 
} 

Answer 4

Я обновил свою скрипку here. Если вы плаваете элемент, он станет элементом блока, и, таким образом, вертикальное выравнивание не будет работать. Пробел с текстом, если он не будет перемещен, будет перенесен на следующую строку.

Инлайн блок, кажется, работает просто отлично:

.li_box { 
     display: inline-block; 
     width:10px; 
     height:10px; 
     margin-right:10px; 
} 

Answer 5

Добавление маржи сверху .li_box исправит проблему.

.li_box { 
... 
margin-top: 1%; 
}