I am trying to vertically align some text within a list li and having issues. First off you need to know that I have replaced my list-style-image with a custom image. This is my CSS:
ul.cogs li {
list-style-image: url(Images/li_cog.png);
height: 50px;
line-height: 50px;
}
I tried to see if there was a way of getting the text to align to the middle. I tried:
vertical-align: middle;
which didn't work, so then I tried:
line-height: 50px;
which also did not work, so I tried:
display: table
which worked, but the image disappears from the list item....
Does anyone know of a way to get this to work?
The issue using list-style-image
is that you cannot align with the text, the best thing to do is to use background-image
for li
element, and then use padding-left
for your li
elements.
Buggy Demo (The issue which you are facing)
ul li {
background-image: url(http://png-5.findicons.com/files/icons/2222/gloss_basic/32/bullet_black.png);
background-repeat: no-repeat;
line-height: 30px;
padding-left: 30px;
}
ul {
margin: 50px;
}
你可以有
<li><span style="top:-5px; position:relative;">Text shifted 5px upper</span></li>
How about
ul.cogs li {
list-style-image: url(Images/li_cog.png);
height: 50px;
line-height: 50px;
position: relative;
}
ul li span {
position: absolute;
top: (x)px;
left: (x)px;
}
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.