通過css控制HTML文本框中的文字垂直居中
發(fā)布時間：2014-02-18 15:37:07 作者：佚名 
我要評論
我要評論當(dāng)定義了 Text 的 height 屬性時，在 Text 中輸入的文字都不是垂直居中的，不過可以通過css來控制它，下面有個不錯的示例，大家可以參考下
當(dāng)定義了 Text 的 height 屬性時，在 Text 中輸入的文字都不是垂直居中的，不過你可以添加CSS來控制它，讓輸入的文字垂直居中，使網(wǎng)頁更完美。
<html>
<head>
<style type="text/css">
#text {
height:20px;
vertical-align:middle;
line-height:20px; /*line-height must be equal to height*/
}
</style>
</head>
<body>
<table>
<input type="text" id="text">
</table>
</body>
</html>
加入 verticla-align、line-height 兩個屬性后，文本框中的文字就在文本框中垂直居中了，要注意的是 line-height 必須要等于 height 。
復(fù)制代碼
代碼如下:<html>
<head>
<style type="text/css">
#text {
height:20px;
vertical-align:middle;
line-height:20px; /*line-height must be equal to height*/
}
</style>
</head>
<body>
<table>
<input type="text" id="text">
</table>
</body>
</html>
加入 verticla-align、line-height 兩個屬性后，文本框中的文字就在文本框中垂直居中了，要注意的是 line-height 必須要等于 height 。
相關(guān)文章
- 這篇文章主要介紹了html中table表格的內(nèi)容水平和垂直居中顯示的相關(guān)資料,需要的朋友可以參考下2017-03-27
- 這篇文章主要針對HTML對于元素水平垂直居中進(jìn)行的探討，對元素水平垂直居中操作進(jìn)行講解，感興趣的小伙伴們可以參考一下2016-02-24
- 本文是小編日常遇到的關(guān)于html水平垂直居中的一些問題小結(jié)，特此分享在腳本之家網(wǎng)站供大家參考2015-11-18
html元素水平居中、垂直居中、水平垂直居中于其父級元素的方法
這篇文章主要介紹了html元素 水平居中、垂直居中、水平垂直居中于其父級元素的方法,需要的朋友可以參考下2014-04-08
本篇文章主要介紹了詳解HTML5中垂直上下居中的解決方案，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-12-20
