Position the <li> dot at the top

Question

I'm trying to get the bulletpoint in a list to align at the top of the instead of the bottom.

Here is an example of what I mean: https://jsfiddle.net/2ma994cr/

<ul class="a">
    <li>Thing 1</li>
    <li><iframe width="420" height="315" src="https://www.youtube.com/embed/3B49N46I39Y" frameborder="0" allowfullscreen></iframe></li>
    <li>Thing 3</li>
</ul>

As you can see in the fiddle, the bulletpoint for the embedded object is at the bottom.

Is there an <li> style I can add in CSS that will align it to the top or another way around this?

Answer 1

You should vertically align the content within the <li>, not the bullet itself. Try this:

li > * {
    vertical-align: text-top;
}

Note: You may need to adjust the selector; what I have only applies the rule to the immediate children of each <li>. Make it more or less specific according to your needs.

An updated fiddle.