html - 在没有 px-measure 的 LI 内垂直居中 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

看到我在 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}