Question

我有以下布局：

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

见fiddle。我在调整文本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;把一切都集中在一起。

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

2 个答案: