Common alignment problems:

  1. On what basis do browsers align ICONS and text?
  2. Why does the icon look 1 pixel out of alignment when flex or vertical-align is used?

Text icon layout

In development, it is common to see images and text displayed on the same line, and the alignment of elements in two lines is often the most troublesome. Sometimes the most common alignment method is used, but there is always some deviation. Let’s take a look at a basic example:

HTML part:

<div class="wrap">
    <img src="https://avatars3.githubusercontent.com/u/16339041?s=60&v=4" alt="">Xx test alignment Style-</div>
Copy the code

The CSS part:

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

The effect of not using alignment is as follows:

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

Vertical-align :baseline; vertical-align:baseline; vertical-align:baseline .

Here are some common solutions to how to center images with text.

Several common center scheme

1, use,vertical-alignCenter alignment

.wrap {
    vertical-align: middle;
    }
.wrap img {
    vertical-align: middle;
}
Copy the code

When we use the commonly used vertical-align text and picture alignment, there is a certain deviation, as shown in the following figure:

Vertical-align’s middle value is actually half the height of the lowercase letter X, so the image will start to align with the middle of the X, but other characters such as S and Chinese will find a slight deviation anyway, and the image will be relatively lower.

2, use,vertical-alignAlso use spans to wrap text

Let’s change it a little bit and wrap the text with the SPAN tag and use vertical-align: middle for the span; Style alignment. You’ll notice that the picture moves up a little bit. The effect is as follows:

In fact, technically speaking, the first way is not really vertical-align, I always use the first way to align, because I’m too lazy to write a span label, but we can actually try vertical-align: middle; Use vertical-align: middle only on the img tag; Vertical-align on the outer div has no effect.

Vertical-align can only be applied to inline elements and elements whose display value is tabale-cell. Vertical-align cannot be inherited.

3. Use Flex layout

display: flex;
align-items: center;
Copy the code

Even flex layouts can sometimes be slightly distorted, such as alignment for even image sizes, even font sizes, and even line-height; If it’s odd, it’s 1px higher.

For details, see the parity alignment errors between iconSize, fontSize, and lineHeight

4. Use ex units

From Zhang Xinxu teacher “CSS world” this way, the ex is the height of the lowercase letter x, can be used in not affected by the font and font size inline element of vertical center alignment effect, PS: but this applies to the icon is highly compatible with text, such as character followed an arrow (click on), it is practical.

.wrap img {
    height: 1ex;
}
Copy the code

​

5. Use of vertical-align numerical mode

Also seen in Zhang Xinxu’s “CSS World”, vertical-align attribute value can use numeric type and percentage value,

For example, the basic case above: If the height of the image is 20px and the text font size is 22px, the default alignment is the baseline of the text, and the image will be 2px up. In this case, you only need to shift the image 2px down to achieve alignment. Moreover, the numeric 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;
        }
Copy the code