i'm using an image for "li" element. the problem is the text displayed under the image.how to align text to center of the list image?
looks as follows
css:
ul.mark{
list-style-image: url('bullet1.jpg');
}
html:
<ul class='mark'>
...
</ul>
views:
182answers:
2
+3
A:
Try using background-image instead. Then set relative padding/margin, this should do the trick.
However, also consider if a user does not have images enabled, it could cause a usability issue.
chrr
2010-01-06 10:18:24
+1
A:
You could use :before to place an image in front of the <li> element.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Name of the page</title>
<meta http-equiv="content-type" content="text/html; charset=utf8">
<style type="text/css">
ul {
list-style: none;
}
li { }
li:before {
display: inline-block;
vertical-align: middle;
height: 64px;
width: 64px;
content: ' ';
background-image: url(bullet_64.png);
}
</style>
</head>
<body>
<ul>
<li>First</li>
<li>Second</li>
<li>Third</li>
</ul>
</body>
</html>
And then you could just add a margin to it if you need to place it further to the left, where the bullets are usually displayed.
This should work in all modern browsers, as well as IE8.
Atli
2010-01-06 10:27:35
But sadly, doesn't work in IE6 and 7 - thus, out of the question for any mainstream site right now.
Pekka
2010-01-06 12:04:09
True. Leave it to Microsoft to make us wait 11+ years for support for basic stuff like this. *(Grrrr)* - But that won't stop me. I've long since stopped going far out of my way to fix IE problems. If people want to use a broken browser, let them see broken pages. *(Luckily, I am self-employed xD)*
Atli
2010-01-06 19:09:57