CSS Web Design tips: Text Picture horizontal alignment Vertical

Article Introduction: vertical-align Picture Text horizontal alignment analysis.

Recently contacted a lot about the picture text horizontal alignment requirements, and then found that if the vertical-align only set to middle, the location of the center alignment under different browsers are offset, so that people do not hurt the egg ~ =,=
Search on the internet did not seem to have found the relevant analysis, most of the cases are vertically centered
So specifically for Vertical-align did a second analysis, Kung Fu not negative, the results of the analysis is quite fun, the vertical-align has an in-depth understanding. to the Force ~ ~ ~

Demo Portal: Vertical-align Analysis of the properties of the error welcome back to correct oh ^__^

Some experience:

Vertical-align definition

At first I thought the vertical-align interpretation was the same as Text-align, the non block element inside the container is aligned, but ~ ~ I misunderstood
From the official vertical-align interpretation of the various attributes, Vertical-align is the definition of the current node, with the external content of the alignment, and text-align interpretation is not the same.

Vertical-align:baseline Baseline Alignment

The analysis results show that baseline is not at the bottom of the visible part of the Chinese word , but at the bottom of the visible part of the English word .
You then find that the image is aligned with the baseline of the adjacent text at the bottom of the picture. I've always thought why there's a 4-pixel blank underneath the picture.

Different fonts can have different effects

I this demo with the Tahoma font, found that if the use of similar yahei and other Chinese fonts, in IE low version will appear some strange phenomenon, detailed can see demo.

Vertical-align better not mix it up.

From the definition to understand, we found that this vertical-align best not to mix. Because of the various compatibility issues that arise from different properties, it is estimated that more complex phenomena will occur if mixed. Although I do not have in-depth research, but I think the mixed use is not very reliable.

VERTICAL-ALIGN:PX positioning is the most stable

This property has never been used, and has been used to achieve horizontal alignment with middle, found in an occasional project code.
Relative positioning is relative to the baseline deviation location, negative value represents the picture relative to the baseline downward shift.
In the study found that the use of relative positioning compatibility best, only IE7 will have 2px deviation, but can be ignored, because the current IE7 users can be ignored .
But this method is not a panacea,
Because it is relative to the relative positioning of the baseline, if the text becomes larger, the image alignment position will not follow the move is different from the middle attribute, but the individual feel that the probability of such a small, and the word big again for adjustment is no problem.
Another picture size is not the same as the corresponding negative value is not the same, detailed see demo.

Climax: vertical-align Best Compatibility solution

The previous study was not in vain, and the personal recommendations of vertical-align use are as follows:
1. Try to keep the main content of the vertical-align is baseline is the default, do not vertical-align when text-align to understand the use.
2. For the internal need to adjust the location of the picture, such as PX positioning.
Advantages: To ensure that the peripheral vertical-align is the default value, does not produce a mixed phenomenon.
Disadvantages: For different sizes of the picture to be targeted, but the general ICO size is almost large, can be unified adjustment.

Next Research direction: is the vertical-align:px of form elements equally applicable?