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

Question

I have the following layout:

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

See fiddle . I am having problems aligning the text Text . Now it is on the same line as the div . I would like to align (vertically) the Text to the middle of the div . I have tried nesting the Text inside a span and giving the span margin-bottom, padding-bottom , but nothing seems to work.

Answer 1

Beware of spacing issues with inline-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;
}

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;
}

I just set a width on the LI to match what the size of the box was (then reduced the size of the box to make sure it centered) and applied display:block;text-align:center; to center everything.