CSS with the same image and text center alignment

ArticleDirectory

• Align text with the middle of the image
• Align text with top image
• Align text with the bottom of the image

It is often necessary to align the pictures and texts in a row. Although a lot of information has taken a lot of detours, a foreign website has seen the correct solution, let's share it with you. Please ignore it.

Align the image to the bottom of the text-usage:

This CSSCodeAlign the bottom of the image with the bottom of the text.

First, you should write the class of the CSS style file in the following format ):

. Textbottom {vertical-align: Text-bottom ;}

Then apply the class to the attributes of the image you want to align, for example (pay attention to the simhei part ):

Class = "textbottom"Alt = "portfolio more info tag">

In this way, the bottom of the image can be aligned with the bottom of the text. The core of this method is to use the text of the row as the benchmark, and then adjust the CSS style of the image to match the text to achieve the desired alignment.

For other image positions, CSS is used to align the text with the middle of the image.

If this effect is not obvious, open this page to see the icon before the link.

One page of Water View

Style:. Textmiddle {vertical-align: middle ;}

Align text with top image

One page of Water View

Style:. Texttop {vertical-align: Top ;}

Align text with the bottom of the image

One page of Water View

Style:. Textbaseline {vertical-align: baseline ;}

Core tips

The reason why I made a detour on such a simple thing is that I did not understand CSS and encountered an article that was wrong. Most of these articles describe such CSS code in the line to be aligned. As shown in the preceding exampleIn the CSS description of the image.. Yes, the Code has all been mentioned, that is, there is no explanation of where to put it.

How to say it? Is this because there is no CSS master in China? Certainly not! However, the results of searching in Chinese are similar to those directly copied from a specific place even if they are ranked first. They may not even be viewed. It's strange that Google is not making the best effort.