Several solutions for CSS record text icon alignment

It is very common to see images and text displayed in one line during development. Aligning two inline elements is usually the most troublesome. Sometimes, even if the most commonly used alignment method is used, there is always a slight deviation. Let's take a look at the most basic example:

HTML part:

<div class="wrap">
    <img src="https://avatars3.githubusercontent.com/u/16339041?s=60&v=4" alt="">
    xxTest Alignment Style-
</div>

CSS part:

.wrap {
      width: 300px;
      text-align: center;
      margin: 20px auto;
      font-size: 14px;
 }
 .wrap img {
      width: 20px;
 }

The effect of not using alignment is as follows:

The default alignment is baseline , which is the bottom line of the letter x.

This also answers the first question. When there is no additional setting for the browser's images and text, they are based on the bottom edge of the lowercase letter x, that is, vertical-align:baseline;

Several common centering solutions

1. Use vertical-align to center the page

.wrap {
    vertical-align: middle;
    }
.wrap img {
    vertical-align: middle;
}

When we use the commonly used vertical-align to align text and images, there is actually a certain deviation, as shown below:

The middle value of vertical-align is actually relative to half the height of the lowercase letter x, so the image will be aligned with the middle of the x. However, for other characters such as S and Chinese characters, you will find that there will be a slight deviation anyway, and the image will be relatively lower.

2. Use vertical-align and span to wrap text

Let's make a slight change, wrap the text part with a span tag and align it using vertical-align: middle; style. You will find that the image will move up a little at this time. The effect is as follows:

3. Use flex layout

display: flex;
align-items: center; 

However, even with flex layout, there may be some deviations sometimes, for example: the image size is an even number, the font-size is an even number, and the line-height is an even number, and it is aligned when it is an odd number; it is 1px higher when it is an odd number.

For more information, see the even-odd relationship alignment error between iconSize , fontSize , and lineHeight

4. Use ex units

This method is something I saw in "CSS World" by Zhang Xinxu. ex is the height of the lowercase letter x. It can be used to achieve the vertical center alignment effect of inline elements that are not affected by font and font size. PS: However, this method is suitable for situations where the icon height is consistent with the text, such as adding an arrow after the character (click to expand), which is very practical.

.wrap img {
    height: 1ex;
}

5. Use of vertical-align numerical method

I also saw in Zhang Xinxu's "CSS World" that vertical-align attribute value can use numerical and percentage values.

For example, let’s use the basic example above: if the image height is 20px and the text font-size is 22px

x, the default alignment is the baseline of the text, so the image will be 2px upwards. At this time, you only need to shift the image downwards by 2px to achieve the alignment effect, and the numerical type of the vertical-align attribute has good compatibility.

.wrap {
            width: 100%;
            padding-top: 200px;
            text-align: center;
            margin: 20px auto;
            font-size: 22px;
            height: 40px;
            
        }
        .wrap img {
            width: 20px;
            vertical-align: -2px;
        }

This concludes this article about several solutions for CSS record text icon alignment. For more relevant CSS text icon alignment content, please search 123WORDPRESS.COM’s previous articles or continue to browse the related articles below. I hope you will support 123WORDPRESS.COM in the future!