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 code：

   <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 2

我已更新你的小提琴here。如果浮动元素，它将成为块元素，因此垂直对齐不起作用。除非浮动，否则带有文本的跨度将换行到下一行。

内联块看起来效果很好：

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

Answer 3

如果您只是希望将div的内容集中在一起，那么这应该就是您所需要的：

 div { text-align: center; }

Answer 4

尝试使用它：

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

Answer 5

向.li_box添加保证金将解决您的问题。

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

在没有px-measure的情况下，在LI内垂直居中DIV

5 个答案: