用CSS让img input select button 图片,文本框,下拉菜单,按扭垂直居中的方法

(编辑：jimmy 日期: 2024/11/17 浏览：3 次 )

如今这世道,各大浏览器横行,杯具的是还不按套路来。
方便了广大群众，害苦了网页设计师。
说实话真怀念当年微软垄断的时代。
只有一个IE6.什么事也不会发生。
虽然IE6也是相当的垃圾...

一直以来,在HTML中,img input select button 这里元素，垂直对齐,比较难。
结果我长大了。
我发现了一个现像，其实解决这些问题只是一句话的事。
img, input, select, button{vertical-align:middle;}
如:

复制代码代码如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>垂直居中测试</title>
<style type="text/css">
img, input, select, button{vertical-align:middle;}
</style>
</head>
<body>
<form name="test" method="POST">
<input type="text"name="insert" /> <img src="/UploadFiles/2021-03-30/btn.gif"></form>
</body>
</html>