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

Question

我有以下布局:

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

参见 fiddle .我在对齐文本时遇到问题 Text .现在它与 div 在同一行.我想(垂直)对齐 Text到 div 的中间.我试过嵌套 Text在 span 里面并给出 span margin-bottom, padding-bottom , 但似乎没有任何效果。

Answer 1

注意行内 block 的间距问题 - 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;
}