Recent projects involve the production of many forms, especially checkboxes and radios. However, during the front-end development process, it was discovered that the single (multiple) check boxes and the prompt text behind them cannot be aligned without any settings, and there is a big difference between Firefox and IE. Even if vertical-align:middle is set, it is still not perfectly aligned. As shown below:
So I checked some websites online and found that this problem is common, as shown below (FF3.5):
In many website pages involving forms, there is a problem that the form elements and the prompt text cannot be aligned. So I decided to study this issue. First of all, I searched for senior wheatlee's article " Everyone has different opinions on vertical-align ". In his article, wheatlee mentioned the following key points about vertical centering:
1. When vertical-align:middle is used, the center of the element is aligned with the center of the surrounding elements.
2. The definition of "center" here is: the picture is of course half the height, and the text should be moved upward 0.5ex based on the baseline, which is the exact center of the lowercase letter "x". However, many browsers often define the unit ex as 0.5em, so that it is not necessarily the exact center of x (if you don’t understand terms such as baseline, please read wheatlee’s article first)
Following this idea and comparing the problems I encountered, the first thing I thought of was to verify whether the browser uses the same rules for rendering "checkboxes" and images (whether it treats the checkbox as a square image) . 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 the exact same size as the check box. The display under FF3.5 is as follows:
