HTML・CSS Writing 2022

Adjusting the vertical position of the image --Technique to align the vertical position of the icon and characters

I will explain how to adjust the vertical position of the image. Once you understand this, you will be able to align the icons and characters neatly.

Default image vertical position

First of all, let's understand the default of the vertical position of the image.

<div style = "background: #eef">
  <img src = "/ images / image-vertical / example.png" width = "80"> Text
</div>

What I would like you to take a closer look at is that the lower part is empty. Please take a closer look. The lower side is vacant.

The top is snugly stuck to the outer div.

In HTML, images are drawn upwards from a position called the baseline. This is why the lower side is empty.

The upper space is calculated automatically. If there is another image or text that is taller than this image, or if the height is set, the space above it will not necessarily be zero.

<div style = "background: #eef">
  <img src = "/ images / image-vertical / example.png" width = "80"> <img src = "/ images / image-vertical / example.png" width = "120"> Text
</div>

First, remember the default vertical position of the image. It is drawn upwards from the baseline, the space above it is calculated automatically and will be 0 if there are no other elements higher than you.

Erase the space below when there is only an image

The easiest way to get rid of the space below if you only have an image is to center the baseline. Use "vertical-align: middle;" to center the baseline.

<div style = "background: #eef">
  <img src = "/ images / image-vertical / example.png" width = "80" style = "vertical-align: middle;">
</div>

This is useful when you only have an image, such as a company or service logo.

What if the text is present at the same time? Let's take a look.

<div style = "background: #eef">
  <img src = "/ images / image-vertical / example.png" width = "80" style = "vertical-align: middle;"> Text
</div>

Hmmm, please keep an eye on it. Does the vertical position of the text deviate from the vertical position of the image in Bimyo? Can you see it? Please take a closer look.

Look in the middle of the vertical position of the letters. Then, move your line of sight to the right. It is slightly off the center position of the "text".

Align the vertical position of the icon and text

Align the vertical position of the icon and text. It is unavoidable that the baseline position may shift slightly depending on the type of text font, but try adjusting it to the center as much as possible.

Use "vertical-align: number of pixels;" to specify the vertical position. Let's set the image size to the icon size.

<div style = "background: #eef">
  <img src = "/ images / image-vertical / example.png" width = "60" style = "vertical-align: -23px;"> Text
</div>

The point is to set the number of negative pixels to vertical-align. Set the drawing position of the image from below the baseline.