LI中沒有px-measure垂直居中的DIV

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} 

有人能幫助我居中盒無需添加PX-措施？

任何工作解決方案（將不勝感激）！

Answer 1

如果您只是要居中div S的內容，這應該是所有你需要：

div { text-align: center; } 

Answer 2

見我已經做了修改在CSS和HTML：

請參閱網址：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%; 
}