用CSS讓img input select button 圖片,文本框,下拉菜單,按扭垂直居中的方法
發(fā)布時(shí)間：2011-03-08 22:41:09 作者：佚名 
我要評(píng)論
我要評(píng)論一直以來,在HTML中,img input select button 這里元素，垂直對(duì)齊,比較難。結(jié)果我長(zhǎng)大了。我發(fā)現(xiàn)了一個(gè)現(xiàn)像，其實(shí)解決這些問題只是一句話的事。
如今這世道,各大瀏覽器橫行,杯具的是還不按套路來。
方便了廣大群眾，害苦了網(wǎng)頁(yè)設(shè)計(jì)師。
說實(shí)話真懷念當(dāng)年微軟壟斷的時(shí)代。
只有一個(gè)IE6.什么事也不會(huì)發(fā)生。
雖然IE6也是相當(dāng)?shù)睦?..
一直以來,在HTML中,img input select button 這里元素，垂直對(duì)齊,比較難。
結(jié)果我長(zhǎng)大了。
我發(fā)現(xiàn)了一個(gè)現(xiàn)像，其實(shí)解決這些問題只是一句話的事。
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>垂直居中測(cè)試</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="images/btn.gif">
</form>
</body>
</html>
方便了廣大群眾，害苦了網(wǎng)頁(yè)設(shè)計(jì)師。
說實(shí)話真懷念當(dāng)年微軟壟斷的時(shí)代。
只有一個(gè)IE6.什么事也不會(huì)發(fā)生。
雖然IE6也是相當(dāng)?shù)睦?..
一直以來,在HTML中,img input select button 這里元素，垂直對(duì)齊,比較難。
結(jié)果我長(zhǎng)大了。
我發(fā)現(xiàn)了一個(gè)現(xiàn)像，其實(shí)解決這些問題只是一句話的事。
img, input, select, button{vertical-align:middle;}
如:
復(fù)制代碼
代碼如下:<!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>垂直居中測(cè)試</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="images/btn.gif">
</form>
</body>
</html>
相關(guān)文章
el-form每行顯示兩列底部按鈕居中效果的實(shí)現(xiàn)
這篇文章主要介紹了el-form每行顯示兩列底部按鈕居中效果的實(shí)現(xiàn),解決辦法也很簡(jiǎn)單只需給el-form 添加 inline 屬性，給每個(gè) item 設(shè)置寬度，給底部按鈕 flex 布局，本文給大2022-07-26實(shí)現(xiàn)div垂直居中的display:table-cell方法示例介紹
要實(shí)現(xiàn)盒模型中的div居中，可以使用display:table-cell方法且兼容多瀏覽器，下面有個(gè)示例，感興趣的朋友可以練練手2014-07-24
