`
swingboat
  • 浏览: 62374 次
  • 性别: Icon_minigender_1
  • 来自: 合肥
社区版块
存档分类
最新评论

设置input的内容居中?

阅读更多

让input的内容在纵向居中,首先我使用了vertical-align样式,没有任何的效果。
后来google了一把,发现需要设置line-height样式,设置后运行,果然如此!
.input   {  
  FONT-SIZE:   12px;    
  height:100px; 
  line-height:100px;
}  
以下是引用内容(http://topic.csdn.net/t/20050722/20/4162420.html):
实际上,一个Box中由很多行很多元素组成,vertical-align只作用于在同一行内的元素,它的垂直并不是相对于整个Box而言的。前面那个   span定义了一个60px的高度,但是这个span的Box中存在很多行,那段文本并不能对齐到span的中央。因此希望那段文本对齐span的中行,   需要给它定义一个line-height的属性,让line-height为60px,作用于一行的vertical-align就按你的想法工作了

分享到:
评论

相关推荐

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

    label 文字与input 垂直居中对齐不容易调好,试验了padding、vertical-align:middle等都不凑效,如 复制代码代码如下: ’DenyReasonRadio3′><input type=’radio’ name=’DenyReasonRadio’ id=’...

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

    为了提升用户体验,我们常常需要对文本框进行定制化处理,使其具备特定的功能,如内容自动垂直居中、默认提示文字显示灰色以及单击后清空提示文字。下面将详细解释如何实现这些功能。 首先,内容自动垂直居中的实现...

    input 文本框 文字垂直居中对齐 ie firefox

    浏览器支持 所有浏览器都支持 line-... 解决这个问题可以用pading设置上下填充,但是如果文本框有背景图片的话就会向下凸出一块,此时可以把max-height值设为height的值。 但为什么会出现不居中,实在是搞不明白。

    js获取input长度并根据页面宽度设置其大小及居中对齐

    本文将深入探讨如何利用`JavaScript`获取`input`元素的长度,并根据页面宽度设置其大小以及实现居中对齐。 首先,我们需要获取页面的相关尺寸。`JavaScript`提供了多种方法来获取浏览器窗口和文档的大小。以下是...

    inputType参数类型说明

    gravity类型的inputType参数用于设置View组件里面内容的对齐方式。常见的gravity类型inputType参数有: * top:顶部对齐 * bottom:底部对齐 * left:左部对齐 * right:右部对齐 * center:居中对齐 此外,input...

    Firefox下input button内文字不能垂直居中的解决方法

    这里提到的"Firefox下input button内文字不能垂直居中的解决方法"就是一个典型的例子。Firefox在处理`input`元素,特别是`type="button"`时,其内部样式存在一些特殊的处理,导致按钮内的文字无法正常垂直居中。 ...

    css中使input输入框与img(图片)在同一行居中对齐

    在CSS布局中,将不同的元素如input输入框与img图片...总之,通过设置`vertical-align: middle`并可能结合调整其他CSS属性,可以有效地实现input输入框与img图片在同一行的居中对齐,从而提高页面的视觉效果和用户体验。

    div水平居中的方法

    CSS网页布局DIV水平居中的各种方法 CSS网页布局DIV水平居中的各种方法 CSS网页布局DIV水平居中的各种方法 CSS网页布局DIV水平居中的各种方法 CSS网页布局DIV水平居中的各种方法CSS网页布局DIV水平居中的各种方法

    js+css 实现遮罩居中弹出层(随浏览器窗口滚动条滚动).docx

    我是弹出层 有没有居中? 居中居中居中居中居中 居中居中居中居中 居中居中居中 ``` CSS 样式: ```css * { margin: 0; padding: 0; } html { background: url(about:blank); } body { background: #...

    表单元素和文字垂直居中对齐问题解决整理

    为了解决这些问题,一种常见的建议是使用表格(`<table>`)来布局表单,因为表格元素天然支持单元格内的内容垂直居中。然而,这种方法虽然有效,但可能不被所有开发者推崇,因为它可能导致代码结构复杂且不利于响应...

    用CSS让img input select button 图片,文本框,下拉菜单,按扭垂直居中的方法

    在这个例子中,`<input>`文本框和`<img>`图片都被设置为垂直居中。由于内联元素之间可能存在间隙,我们可以通过添加一个内联元素(在这里是`<span>`)来调整元素之间的距离,使其看起来更加美观。 需要注意的是,...

    搜索框符号居中

    3. **图标定位**:如果使用的是伪元素,可以通过content属性插入图标,然后设置适当的width和height,以及text-align属性来实现居中。如果使用的是img标签,可以使用margin: auto来自动居中。 4. **响应式设计**:...

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

    这里的`<input>`元素设置了ID为`search-input`,以便在JS中引用,`<button>`元素的ID为`clear-btn`,点击时会触发`clearInput`函数。 接下来是CSS部分,主要任务是定位和样式化删除按钮,使其看起来像是输入框的一...

    jquery 代码解决placeholder不换行,不居中问题

    input { text-align: center; /* 使 placeholder 居中 */ word-wrap: break-word; /* 允许 placeholder 换行 */ } ``` #### 四、实践应用与优化建议 - **兼容性考虑**:虽然上述示例代码主要针对现代浏览器进行...

    HTMl、js中设置div的透明度(非常实用)、div居中

    非常实用的页面制作,用于设置div的透明度,以及div在页面左右居中

Global site tag (gtag.js) - Google Analytics