Bullets center with unordered list

Question

Does anyone know the CSS that makes the bullet point sit at the top of a multi-line bulleted list? For some reason with the template that I am using the bullet point centers to the left instead of simply sitting next to the first word if I have more than one line of text.

Sorry I didn't get back to you guys until now... Yes the bullet is looking for an image. The CSS code is: .content-a ul li { margin: 0 0 3px 0; padding: 0 0 0 13px; background: transparent url(../images/bullet-a.png) no-repeat 0 25%; } When I was playing around with the code it was originally set to 100% but what I found was 25% fit the bullets much better. Although it is still not exact. At 25% the bullet point still sits a couple pixels below the top line and on a single line the bullet point sits a couple pixels above the line of text. — Logan, Jul 05 '11 at 18:55

score 54 · Answer 1 · answered Jul 02 '11 at 18:27

54

Set the list style position to inside the list item, see this demo fiddle.

CSS:

ul {
    list-style-position: inside;
}

answered Jul 02 '11 at 18:27

NGLN

43,011
8
105
200

1

This didn't work for me for some reason but `li { list-style-position: inside; }` did. Could be related to the rest of the stylesheet (I'm using a template). Sorted, anyway. – Ken Sharp Jan 07 '16 at 09:06

score 1 · Answer 2 · edited Jun 20 '20 at 09:12

This is not an answer per-se but it may give others an insight to a similar visual situation with a different set of circumstances.

I had the same issue, like so:

My HTML looked like this:

<ul>
    <li>
        <a href="#">Link with several lines. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia, commodi!</a>
        <p>Lorem ipsum dolor sit amet.</p>
    </li>
    <li>
        <a href="#">Link with several lines. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia, commodi!</a>
        <p>Lorem ipsum dolor sit amet.</p>
    </li>
</ul>

And the CSS like this:

a {
    display: inline-block;
    vertical-align: middle;
}

See the offending part? The vertical-align: middle; declaration.

There are two solutions:

Solution 1

Remove the vertical-align: middle; declaration altogether.

Solution 2

Change the value: vertical-align: middle; to vertical-align: top;.

Result (as expected in the beginning):

Hope this helps.

score -3 · Answer 3 · answered Jul 02 '11 at 16:20

-3

You could do something like this:

(css)
li div:before
{
   background-image:url('bullet.png');
}

(html)
<ul>
    <li>
        <div>
            text<br />
            more text
        </div>

    </li>
</ul>

answered Jul 02 '11 at 16:20

Joshua Welker

547
1
9
20

Bullets center with unordered list

3 Answers3

Solution 1

Solution 2

Result (as expected in the beginning):

Linked