'How do I change the alignment of a list item in regards to an image? [duplicate]

I am creating an ordered list of images using uppercase letters instead of numbers. When I insert the image the line letter (A, B, etc) is aligned to the bottom of the image and I would live to move it to the top of the image. Here is an example.

<ol type="A">
  <li><img alt="" height="56" src="prod-dp-cms-api.s3.amazonaws.com/cms/EM_2_EQ_409_fb2217130b.png" width="400" /></li>
</ol>
htmlcss


Solution 1:[1]

It's hard to recommend something without seeing the html layout. Is the letter just a text or is it inside it's own element (usually better approach)?

I like to use flex, this can do what you want when applied to parent container element:

display: flex;
align-items: flex-start;

or simply

 vertical-align: text-top;

There is plenty of other ways, as I said, depends on the layout.

Solution 2:[2]

img{
vertical-align:middle;}
<ol type="A">
  <li><img alt="" height="56" src="prod-dp-cms-api.s3.amazonaws.com/cms/EM_2_EQ_409_fb2217130b.png" width="400" /></li>
</ol>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Pavel Horyna
Solution 2 DCR

Related Questions