`
遐想英灵
  • 浏览: 10620 次
  • 性别: Icon_minigender_1
  • 来自: 重庆
社区版块
存档分类
最新评论

input标签文字居中

阅读更多
记录一个常遇到的小问题:
在页面的input标签中,经常需要将文字垂直居中,网上大多数做法是用vertical-align:middle来控制。但是CSS中这个属性经常不好用。原因很多人分析过,大多数都说文字垂直居中没啥可行的好方法。有时候会建议用padding属性,但我使用的效果并不理想。
今天遇到个可行的方式,就是给input标签设置line-height属性。
例如在CSS中:
input {
line-height:24px;
}
高度需要自己调,这样可以满足适当的居中要求。
1
0
分享到:
评论
1 楼 yixiandave 2013-12-19  
height和line-height相等可以保证文本在框体垂直居中(仅仅适用单行文本)

相关推荐

    margin-top负值解决label 文字与input 垂直居中对齐问题

    然而,让`<label>`中的文字与`<input>`元素垂直居中对齐并不是一个直观的过程,因为浏览器的默认样式可能并不理想。在这种情况下,利用CSS的`margin-top`负值属性可以有效地解决这个问题。 首先,让我们理解`...

    常用input文本框内容自动垂直居中并默认提示文字单击为空

    例如,在给定的代码中,`<input>`标签设置了`height:30px;`和`line-height:30px;`,这样就确保了文本在文本框内垂直居中。 其次,为了让默认提示文字显示为灰色,我们可以设置`color`属性。在示例代码中,`style=...

    input输入框删除文字效果js代码

    为了提供更好的用户体验,许多网站会添加一些交互特效,例如本例中的"input输入框删除文字效果js代码"。这个特效使得用户在输入框中输入文字后,可以通过点击一个可操作的图标或按钮来轻松清除已输入的内容,类似...

    网页设计中input标签写CSS时需要注意的几个问题

    二是在IE浏览器中属性为text的input标签中的输入文字不像标准浏览器中的那样垂直居中显示,而是靠输入框的左上角显示。 为了彻底解决搜索框的这些问题,我以GreenGaint主题搜索框的样式为准,重写了一遍代码并且以...

    input button文字的行高在FF下的显示问题

    最近国外有开发者发现Firefox和Opera的一个BUG:无法改变按钮里文字的行高(包括input type=”sumbit”和HTML的button标签)。举个例子,对一个按钮使用以下样式: 复制代码代码如下: input#button { border: 2px ...

    js实现input框文字动态变换显示效果

    此外,`padQuote()`函数用于在字符串前后添加空格,确保在input框内显示时,文字始终保持居中。 在HTML中,我们可以创建一个`<input>`元素,并通过JavaScript来设置它的`value`属性,使其随着时间推移不断更新,...

    表单元素与提示文字无法对齐的解决方法(input,checkbox文字对齐)

    `,使得复选框与其相邻的标签保持垂直居中对齐。同时,`padding: 2px;`增加了复选框周围的内边距,提供了一定的视觉缓冲。 3. `label`选择器则确保了`<label>`元素也具有`vertical-align: middle;`,使其与关联的...

    HTML标签解释大全

    - **说明**:`<center>` 标签用于将后面的文本和图像居中显示,但该标签已经被废弃。例如: ```html 这是居中的文本。 ``` ##### 标签:cite - **说明**:`<cite>` 标签用于用斜体显示标明引言。例如: ```html...

    HTML标签(下)(表格+列表+表单)

    input标签有多种类型,例如text、password、checkbox、radio等。例如: ``` <input type="text" name="username" /> ``` 标签 标签用于定义表单中的下拉列表。例如: ``` 选项1 选项2 选项3 ``` 标签 标签...

    通过css控制HTML文本框中的文字垂直居中

    在网页设计中,文本元素的布局和样式控制是至关重要的,尤其是当涉及到用户交互的文本框(`<input type="text">`)时。垂直居中对于提升用户体验和视觉美观有着显著的效果。本文将深入探讨如何通过CSS来实现HTML文本...

    HTML常用标签.pdf

    29. <input>:<input> 标签用于搜集用户信息。根据不同的 type 属性值,输入字段拥有很多种形式。输入字段可以是文本字段、复选框、掩码后的文本控件、单选按钮、按钮等等。 30. <select>:<select> 元素可创建单选...

    html标签,属性大全.pdf

    17. **居中文本标签**:`<center>` 已弃用,现在通过CSS实现居中对齐。 18. **引用标签**:`<cite>` 用于表示作品(如书籍、电影、歌曲)的名称。 19. **代码文本标签**:`<code>` 用于表示计算机代码文本。 20. ...

    点击按钮文字变成input框,点击保存变成文字的实现代码

    - `.text`类定义了文本框(input)的宽度、高度、边框样式以及居中对齐。 3. JavaScript基础 - 使用`<script>`标签引入了jQuery库,这是一个快速、小巧且功能丰富的JavaScript库,简化了HTML文档遍历、事件处理、...

    网页设计标签总览.pdf

    `<p>`标签用于定义段落,`<center>`标签用于居中对齐文本。`<table>`、`<tr>`、`<th>`、`<td>`等标签用于创建和控制表格布局。这些标签允许网页设计师创建复杂的表格结构,包括设置边框、单元格填充、单元格间距等。...

    HTML常用的标签和属性.doc

    #### 十八、文字域标签 `<input type="text">` - **属性**: - `name`:设置输入字段的名字。 - `size`:设置输入字段的大小。 - `value`:设置输入字段的默认值。 - `maxlength`:设置输入字段允许的最大字符数...

Global site tag (gtag.js) - Google Analytics