Recent projects involve a lot of form production, especially checkboxes and radio boxes. However, during the front-end development process, it was found that the single (complex) check boxes and the prompt text behind them could not be aligned without any settings, and there was a big difference between Firefox and IE. Even if vertical-align:middle is set, it still cannot be perfectly aligned. As shown in the figure below:
So I checked some websites online and found that this problem is common, as shown in the figure below (FF3.5):
In many websites, there is a problem that the form elements cannot be aligned with the prompt text. So I plan to study this issue. First, I searched for the article "Everyone says everyone to vertical-align" by senior wheatlee. In his article, wheatlee mentioned several key points about vertical centering:
1. When vertical-align:middle, the center of the element is aligned with the center of the surrounding elements.
2. The definition of the center here is: the picture is of course half the height, and the text should be moved up by 0.5ex based on the baseline, that is, the center of the lowercase letter x. However, many browsers often define the unit of ex as 0.5em, so it is not necessarily the center of x (if you don’t understand nouns such as baseline, please read wheatlee’s article first)
According to this idea, compared with the problems I encountered, the first thing that comes to mind is to verify whether the browser uses the same rules for the check boxes and images to render (whether do you treat the check boxes as a square picture). So I wrote the following code:
<style>
body{font-size:12px;}
</style>
<input style=vertical-align:middle; name=test type=checkbox>
<img style=vertical-align:middle; src=testpic.gif />
Test text
The testpic.gif in the code is a black picture with exactly the same size as the check box. The following display under FF3.5:
Previous page 1 2 3 4 Next page Read the full text