CODEWITHSUNDEEP
htmltextalignmenthtml-lists
ArK
ArK

Reputation: 21068

how to align list text to center

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 followsimage

css:

 ul.mark{
list-style-image: url('bullet1.jpg');
 }

html:

<ul class='mark'> 
  ...
</ul>

Upvotes: 0

Views: 3800

Answers (2)

Atli
Atli

Reputation: 7930

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.

Upvotes: 1

chrr
chrr

Reputation: 320

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.

Upvotes: 4

Related Questions