Iput、textarea标签对齐

最新推荐文章于 2024-02-02 18:00:34 发布

鱼片橙子

最新推荐文章于 2024-02-02 18:00:34 发布

阅读量2.1k

点赞数

CC 4.0 BY-SA版权

分类专栏： css

本文链接：https://blog.youkuaiyun.com/qq_26171035/article/details/82592871

css 专栏收录该内容

2 篇文章

订阅专栏

本文介绍了一种简单的CSS技巧，使label文字与input、textarea元素垂直居中对齐，提升网页美观度。通过设置vertical-align:middle样式属性即可轻松实现。

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

Iput、textarea标签不垂直对齐，网页实在不美观。就通过研究得到了一个label文字与input、textarea垂直居中对齐的简单方法，关键在于css标签vertical-align: middle。

input：

textarea：

label文字与input、textarea垂直居中对齐的解决方法：在input标签样式中加入vertical-align: middle;即可解决。问题思路：浏览器对于“复选框”和图片使用同样的规则，把复选框当成一个正方形图片来对待，既可以简单实现abel文字与input、textarea垂直居中对齐。

label文字与input、textarea垂直居中对齐代码示例：

<label for="address"> input：</label><input type="text" name="address" id="address" maxlength="30" style="vertical-align:middle;" /> 
<label for="note"> textarea：</label><textarea name="note" id="note" style="width:150px;height:40px;vertical-align:middle;"></textarea>