列表元素内的文本和div垂直对齐

Question

我有以下布局：

<ul>
    <li>Text
        <div class="task"></div>
    </li>
</ul>

见小提琴 。 我在对齐文本Text时遇到问题。 现在它与div在同一行。 我想将Text （垂直）对齐到div的中间。 我尝试将Text嵌套在一个span并给该span margin-bottom, padding-bottom ，但似乎没有任何效果。

Answer 1

小心内联块的间距问题-http ://robertnyman.com/2010/02/24/css-display-inline-block-why-it-rocks-and-why-it-sucks/

http://jsfiddle.net/6AxbH/1/

.task {
  display:inline-block;
  vertical-align: middle;
}

Answer 2

.task {
    height:20px;
    width:20px;
    background-color:red;
    display:inline-block;
    text-align:center;
    float:none;
}

ul li {
    text-align:center;
    width:50px;
    display:block;
    list-style:none;
}

我只是在LI上设置一个宽度以匹配框的大小（然后减小框的大小以确保其居中），然后应用display：block; text-align：center; 集中一切。