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

Question

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>

Answer 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.

Answer 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>