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

最新推荐文章于 2024-06-18 19:41:46 发布
最新推荐文章于 2024-06-18 19:41:46 发布
阅读量4.4w 收藏 4
点赞数 2
文章标签： html css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/gantrylau/article/details/51473868
版权 
<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>

加入 verticla-align、line-height 两个属性后，文本框中的文字就在文本框中垂直居中了，要注意的是 line-height 必须要等于 height 。

gantrylau
关注
  • 2
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
通过css控制HTML文本框中的文字垂直居中
12-13
在网页设计中，文本元素的布局和样式控制是至关重要的，尤其是当涉及到用户交互的文本框（`<input type="text">`）时。垂直居中对于提升用户体验和视觉美观有着显著的效果。本文将深入探讨如何通过CSS来实现HTML文本...
input text value 文字上下居中
terryjs
08-03 2157
加入 style="padding-top:2px;" 指定input内部 字体与上面边线的距离   -------------------------------------------------------------------------------------   &lt;input type="submit" value="文字居中" style="text-align:...
在css里如何控制表单中文本的value内的文字的位置，比方说让它向右移动2px
weixin_33817333的博客
11-17 1518
方法1：比较简单的方法是将文本放到一个容器中（div，span，a等等）然后给容器设置样式，通过控制容器的位置来达到控制字体位置。（margin-left:10px; margin-top:15px;）；方法2：直接设置文本所在容器的样式，里面有个text-align属性，可以设置为text-align：left;(center;right;justify;inherit)这个方法控制度比较低，...
HTML中的文本居中
最新发布
qq_42194101的博客
06-18 1065
本文将详细介绍如何在HTML中实现文本居中，包括使用不同的HTML标签和CSS属性来达到这一目的。
让input type=text 文本输入框的文字居中显示
自由的博客
09-27 3万+
很多时候在写输入框的时候，页面输入框上显示的内容都是靠上的，总觉得怪怪的，后来发现原来是行高和输入框的高度不一致导致的，所以把他们设置为一样的高度就可以了例如：style=“height=20px;line-hight=20px;”这样设置之后你就会发现他们居中显示，不靠上了。
input文本框、文字、按钮、图片 垂直居中对齐的解决办法
familyGo的专栏
07-27 2万+
1.input 文本框 文字垂直居中对齐 表单默认input文本框文字并不垂直居中而在顶端，如何调整呢，可以通过css来调整垂直高度，代码演示如下 input type="text" style="font-size:12px;line-heigh
如何改变文本框在HTML中的位置
southwindpass的博客
12-06 1万+
前言 ：对于包括我在内的初学者而言，如何改变文本框在html页面上的位置,，一直很恼火。下面是在下整理的一些方法，自知不配求赞，只愿少喷: ** 首先是上下移动，其次是左右移动，两者难度差别大，故这里分开说 1. 上下移动 1.创建一个div,然后将文本框放入div中:（注意:如果只想移动这一个文本框到指定位置的话，最好使用类选择器，来从css文件中获取该div标签）. 如图所示 2.在css格式文件中，来修饰该div，主要方法如下: 即可完成，简单吧? 2.左右移动 由于在下是后端方向，前段技术实在感
常用input文本框内容自动垂直居中并默认提示文字单击为空
12-08
在网页设计中，文本框（`<input type="text">`）是用户输入信息的基本元素。为了提升用户体验，我们常常需要对文本框进行定制化处理，使其具备特定的功能，如内容自动垂直居中、默认提示文字显示灰色以及单击后清空...
用CSS让img input select button 图片,文本框,下拉菜单,按扭垂直居中的方法
09-25
在这个例子中，`<input>`文本框和`<img>`图片都被设置为垂直居中。由于内联元素之间可能存在间隙，我们可以通过添加一个内联元素（在这里是`<span>`）来调整元素之间的距离，使其看起来更加美观。 需要注意的是，...
html关于input平行/垂直居中显示
m0_58522778的博客
03-12 1万+
html关于input平行且垂直居中显示的方法
html 按钮居中、input内容居中
weixin_44195615的博客
05-24 4242
margin-left:auto;margin-right:auto;
html文本上下左右居中
05-14
html文本上下左右居中
html 中input 框 与文字不能垂直居中, 怎么解决?
daoshud1的专栏
08-28 1万+
呢称 就是给Input加上vertical-align:middle属性。 将支持valign 特性的对象的内容与对象中部对齐 或 css添加下面两个属性 1) vertical-align:middle 2) 定义line-height: 属性， 让line-height 等于height 这样应该就能兼容所有的浏览器 比如 .td { vertical-al
设置input 内容居中显示
热门推荐
舒婷(Zoe)
08-06 13万+
text-align:center  水平居中显示 input.text{text-align:center;padding:10px 20px;width:300px;}
初学者：关于html中的text-align文本居中属性详解
lyclyc_的博客
05-31 1万+
text-align属性：文本对齐方式，设给**块级元素**。因为行级元素有个特点，内容有多宽，它就有多宽。也就是内容自适应。比如说坐在椅子上把椅子撑满了，就无法再说它居中居左居右了。 解释代码如下： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> .txt1{ .
HTML 中 Input标签的 placeholder 字体水平居中样式：
baidu_35862269的博客
11-01 8375
人狠话不多…直接简洁放样式： &amp;lt;style&amp;gt; input::-ms-input-placeholder{ text-align: center; } input::-webkit-input-placeholder{ text-align: center; } &amp;lt;/style&amp;gt; 样式定义之后，...
html文本中心居中,在html数字输入中居中文本(Center text in html number input)
weixin_42458282的博客
05-31 1190
在html数字输入中居中文本(Center text in html number input)我有一个在html中的数字输入。 我想中心文本(即输入)在里面。 我当然做到了：text-align: center;哪种作品。 但问题是。 当显示这些箭头时，文本现在居中。 但是当箭头消失时，文本停留在现在不再是中心的相同位置。I have a number input in html. I want...
一、页面中有一个div，通过嵌入式样式设置这个div的高度200px,宽度200px边框是3px的蓝色实线，并且是圆形。（20分） 二、给页面上的未访问的a链接的字体颜色设置为黄色；给页面中的已经点击过的a链接字体颜色设置为红色;（10分） 三、写出下面样式的权重值，并写出能够使之生效的html代码（10分） form input[name="txt"] { color: red; } div>.item:hover { font-size: 30px; } 四、创建一个导航栏，包含影院、电影和个人中心三个选项，这个导航栏距离页面顶部200px,当导航栏滚动到页面顶部时，会自动吸附在顶部不会消失。（10分） 五、创建一个表单，可输入账号（文本框）和密码（ 密码框），点击提交按钮，可以提交到reg.html页面（显示注册成功），点击重置按钮可以恢复表单的初始状态。（20分） 六、页面中有无序列表,将页面中所有元素的第一个li子元素的字体颜色设置位红色（10分） <ul> <li>HTML<li> <li>CSS<li> <li>JS<li> </ul> <ol> <li>语文<li> <li>数学<li> <li>英语<li> </ol> 七、在页面中放置一个p标签，设置它距离左边为200px，上边为100px。(10分) 八、设置div中的所有元素水平分布，并且垂直居中（10分） <div id="box" style="border: 1px solid red;"> <p>张三</p> <p>李四</p> <p>王五</p> </div>
06-08
一、页面中有一个div，通过嵌入式样式设置这个div的高度200px,宽度200px边框是3px的蓝色实线，并且是圆形。 ```html <div style="width: 200px; height: 200px; border: 3px solid blue; border-radius: 50%;"></div> ``` 二、给页面上的未访问的a链接的字体颜色设置为黄色；给页面中的已经点击过的a链接字体颜色设置为红色; ```html <style> a:link { color: yellow; } a:visited { color: red; } </style> ``` 三、写出下面样式的权重值，并写出能够使之生效的html代码 样式的权重值分别为：0111（form input[name="txt"]）和 0021（div>.item:hover）。 ```html <form> <input type="text" name="txt" value="Hello World!"> </form> <div> <p class="item">This is a paragraph.</p> <p class="item">This is another paragraph.</p> </div> ``` 四、创建一个导航栏，包含影院、电影和个人中心三个选项，这个导航栏距离页面顶部200px,当导航栏滚动到页面顶部时，会自动吸附在顶部不会消失。 ```html <style> .navbar { position: fixed; top: 200px; width: 100%; background-color: #f1f1f1; } </style> <div class="navbar"> <a href="#">影院</a> <a href="#">电影</a> <a href="#">个人中心</a> </div> ``` 五、创建一个表单，可输入账号（文本框）和密码（密码框），点击提交按钮，可以提交到reg.html页面（显示注册成功），点击重置按钮可以恢复表单的初始状态。 ```html <form action="reg.html"> <label for="username">账号：</label> <input type="text" id="username" name="username"><br><br> <label for="password">密码：</label> <input type="password" id="password" name="password"><br><br> <input type="submit" value="提交"> <input type="reset" value="重置"> </form> ``` 六、页面中有无序列表,将页面中所有元素的第一个li子元素的字体颜色设置位红色。 ```html <style> li:first-child { color: red; } </style> <ul> <li>HTML</li> <li>CSS</li> <li>JS</li> </ul> <ol> <li>语文</li> <li>数学</li> <li>英语</li> </ol> ``` 七、在页面中放置一个p标签，设置它距离左边为200px，上边为100px。 ```html <p style="position: absolute; top: 100px; left: 200px;">这是一个段落</p> ``` 八、设置div中的所有元素水平分布，并且垂直居中。 ```html <style> #box { display: flex; justify-content: space-between; align-items: center; height: 200px; } </style> <div id="box" style="border: 1px solid red;"> <p>张三</p> <p>李四</p> <p>王五</p> </div> ```
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值