让HTML中的文本框<input type="text">中的文字垂直居中

最新推荐文章于 2025-03-15 08:14:01 发布

gantrylau

最新推荐文章于 2025-03-15 08:14:01 发布

阅读量4.4w

点赞数 2

文章标签： html css

本文链接：https://blog.csdn.net/gantrylau/article/details/51473868

版权

本文介绍了一种使文本框内的文字实现垂直居中的CSS布局技巧。通过设置`vertical-align:middle`及确保`line-height`等于`height`属性值的方法，可以轻松达到文字在文本框内垂直居中的效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<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>
    <div>
        <input type="text" id="text">
    </div>
</body>
</html>