站长资源网页制作

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

整理:jimmy2024/12/31浏览2
简介如今这世道,各大浏览器横行,杯具的是还不按套路来。 方便了广大群众,害苦了网页设计师。 说实话真怀念当年微软垄断的时代。 只有一个IE6.什么事也不会发生。 虽然IE6也是相当的垃圾... 一直以来,在HTML中,img input select button 这里元素,垂直对齐,比较难。 结果我长
如今这世道,各大浏览器横行,杯具的是还不按套路来。
方便了广大群众,害苦了网页设计师。
说实话真怀念当年微软垄断的时代。
只有一个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>