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.

Answer 1

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.

Answer 2

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>

Answer 3

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

CSS:

ul {
    list-style-position: inside;
}