What should I do if the text behind the css image cannot be centered?

The solution to the problem that the text behind the css picture cannot be centered: First create an HTML sample file; then lay out a picture and text; finally add the style "vertical-align: middle" to the picture and text respectively. Can.

The operating environment of this tutorial: windows7 system, css3 version, thinkpad t480 computer.

Recommended: "css video tutorial"

The text after the css picture cannot be centered?

For example, now I To make a simple delete button, which only consists of an icon and the word "delete", I will give you 30 seconds to think about how you will lay it out.

Okay, first show the HTML code as follows:

<div class="del"><span class="icon"></span><span>删除</span></div>

It’s very simple, there are two span tags under a div element with class del. Of course, you can also directly replace the icon with a pseudo element. (I still don’t know about pseudo-elements and thinking about the past...).

Next you might write CSS like this:

.del {
font-size: 18px;
}
.del .icon {
display: inline-block;
width: 16px;
height: 24px;
margin-right: 5px;
background: url("imgs/delete.png") no-repeat center;
background-size: 100%;
}

Then it will look like this:

Huh? It seems different from what I imagined! Why can’t pictures and text be aligned vertically? Why?

This is because pictures and text are vertically aligned by default within the line based on the baseline. The baseline of the picture is at the bottom of the picture, but the baseline of the text is below the midpoint of the text. That’s why it happens. Displayed as shown above. So how to solve this problem?

It’s very simple. We only need to add vertical-align: middle to the picture and text respectively:

.del .icon {
display: inline-block;
width: 18px;
height: 24px;
margin-right: 5px;
vertical-align: middle;
background: url("imgs/delete.png") no-repeat center;
background-size: 100%;
}
.del span {
vertical-align: middle;
}

In this case, the picture and text will be aligned with their center lines:

Description:

The vertical-align attribute sets the vertical alignment of the element.

The vertical-align attribute defines the vertical alignment of the baseline of an inline element relative to the baseline of the row in which the element is located. Allows specifying negative length values ​​and percentage values. This lowers the element instead of raising it. In table cells, this property sets the alignment of the cell contents in the cell box.

Use vertical-align:middle to place the element in the middle of the parent element.

The above is the detailed content of What should I do if the text behind the css image cannot be centered?. For more information, please follow other related articles on the PHP Chinese website!