一个网站会涉及到很多表单的制作,特别是复选框(checkbox)和单选框(radio)。但是在前端开发过程中,单(复)选框和它们后面的提示文字在不进行任何设置的 情况下,是无法对齐的,而且在Firefox和IE中相差甚大。即使设置了vertical-align:middle,也依然不能完美对齐。

解决办法:
1、文字大小必须是偶数,比如12PX。
2、将文字加上label标签并且也添加vertical-align:middle样式。
3、然后去除表单元素的边距。

案例:

提示:你可以先修改部分代码再运行。

其他表单元素:

提示:你可以先修改部分代码再运行。

其他文字:

提示:你可以先修改部分代码再运行。

转载请注明来自:爱前端

One thought on “文字和表单元素垂直对齐

发表评论

电子邮件地址不会被公开。 必填项已用*标注