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.
Beware of spacing issues with inline-block - http://robertnyman.com/2010/02/24/css-display-inline-block-why-it-rocks-and-why-it-sucks/
.task {
display:inline-block;
vertical-align: middle;
}
.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.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.