`
daoshud1
  • 浏览: 556822 次
  • 性别: Icon_minigender_1
  • 来自: 济南
社区版块
存档分类
最新评论

html 中input 框 与文字不能垂直居中, 怎么解决?

    博客分类:
  • css
 
阅读更多
<p>
<input type="text" name="author" id="author" style="vertical-align:middle" />
<label for="author"><small>呢称</small></label>
</p>


就是给Input加上vertical-align:middle属性。
将支持valign 特性的对象的内容与对象中部对齐


css添加下面两个属性

1) vertical-align:middle

2) 定义line-height: 属性, 让line-height 等于height

这样应该就能兼容所有的浏览器

比如
.td {
    vertical-align:middle;
    line-height:32px;
    height:32px;
}


原地址:http://www.sooset.com/q_47fe42c55b6a2f3f63ff62231bc83492.html
分享到:
评论

相关推荐

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

    总的来说,解决Firefox下`input button`文字垂直居中的问题,关键在于理解浏览器的默认样式和如何针对性地覆盖这些样式。在进行网页开发时,充分考虑浏览器兼容性,使用适当的CSS hack或通用的解决方案,能够帮助...

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

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

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

    总的来说,解决表单元素和文字垂直居中对齐问题需要对CSS的`vertical-align`属性有深入理解,并且要考虑到不同浏览器之间的兼容性问题。通过精确调整`vertical-align`的数值和运用特定浏览器的hack,可以确保在各种...

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

    为了解决这个问题,我们可以使用CSS(层叠样式表)来控制文本框内的文字垂直居中。 在上述文档内容中,提到了两个关键的CSS属性:`vertical-align`和`line-height`。这两个属性配合使用可以实现文本的垂直居中。 ...

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

    在网页设计中,元素的垂直居中对齐一直是一个常见的需求,尤其是在涉及到img、input、select和button这些HTML元素时。这些元素默认的对齐方式往往不尽如人意,导致在布局时出现视觉上的不协调。然而,随着CSS技术的...

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

    在网页开发中,输入框(Input)是用户与页面交互的重要元素,常见于表单提交、搜索功能等。为了提供更好的用户体验,许多网站会添加一些交互特效,例如本例中的"input输入框删除文字效果js代码"。这个特效使得用户在...

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

    在CSS中,`line-height`属性用于设置文本行之间的高度,当其值与元素的高度相等时,文本内容会垂直居中显示。例如: ```html &lt;input type="text" ... style="height: 30px; line-height: 30px;"&gt; ``` 在这个例子中...

    canvas写一个字

    本项目“canvas写一个字”聚焦于利用HTML5的Canvas API创建一个响应式的画板功能,使得用户无论在PC端还是手机端都能流畅地进行绘画,写下文字。 首先,Canvas是HTML5的一个核心元素,通过JavaScript进行编程操作。...

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

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

    checkbox与文字混排无法对齐导致不美观的解决方法

    本篇文章将探讨如何解决这一问题,以确保checkbox与文字能够完美地居中对齐,无论是在Firefox(FF)还是Internet Explorer(IE)等不同浏览器中。 首先,我们需要了解问题的根源。默认情况下,checkbox和文字元素在...

    2022年HTML语言与网设计题库含答案.doc

    22. 在HTML表单中,文本框、口令框和复选框都是用INPUT标识符生成的。 23. 在HTML表单中,提交按钮和重置按钮都可以用图象表达。 24. 在网页中插入Flash动画,一般需要使用OBJECT标识符。 25. Java小应用程序对象...

    CSS里的各种水平垂直居中基础写法心得总结

    CSS实现水平垂直居中的基础写法是前端开发中非常常见的一项技能,它主要分为水平居中和垂直居中两大部分。在这篇文章中,我们将重点学习各种基础的居中方式,并且会涉及到行内元素和块级元素的概念,以及display属性...

    chrome、firefox、IE中input输入光标位置错位解决方案

    本文主要探讨的是在Chrome、Firefox和IE浏览器中,`&lt;input&gt;` 输入框内光标位置出现错位的问题及其解决方案。 问题的起因在于开发者通常会为了美观或者功能需求,使用背景图片来模拟`&lt;input&gt;`输入框的样式,并通过...

    CSS 文本域和按钮对齐不一致解决方案

    文字要包含在label标签中,并设置行高,否则文字会与文本框的顶 端对齐。文本框要设置vertical-align:middle;否则文本框与button顶端对齐。button中文字垂直居中,要设置高和行高,行高要小于高。 对input标记设定...

    仿Google输入+取得控件绝对位置+text的正下方左对齐+可编辑下拉框

    在JavaScript中,我们可以使用HTML5的`&lt;input&gt;`元素来创建基础的文本输入框,然后通过CSS来定制样式,如圆角、边框宽度、背景色等,使其与Google的风格保持一致。 2. **取得控件绝对位置**:在JavaScript中获取控件...

    好看的勾选框

    `垂直居中对齐文本和勾选框图标。 - **尺寸控制**:设置宽度和高度为`.8em`,使自定义勾选框具有统一的尺寸。 - **边框圆角**:使用`border-radius: .2em;`让勾选框边缘更柔和。 - **内边距调整**:通过`text-...

Global site tag (gtag.js) - Google Analytics