`
天梯梦
  • 浏览: 13730764 次
  • 性别: Icon_minigender_2
  • 来自: 洛杉矶
社区版块
存档分类
最新评论

div 文字 input 垂直居中

XHTMLCSSHTML 
阅读更多

代码：

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
.div1{ 
	width:500px; 
	height:60px; 
	line-height:60px; 
	border:1px solid #000; 
	padding:0px 5px;
}

.font1{ 
	color:#000; 
	font-size:12px; 
	font-family:Verdana, Arial, Helvetica, sans-serif;
}

.input1{ 
	border:1px solid #999999; 
	width:100px; 
	height:38px; 
	line-height:38px; 
}
</style>
</head>

<body>
<div class="div1 font1">This is a test....
    <input type="text" name="textfield" id="textfield" class="input1" style="vertical-align:middle"/>
    <img src="q/q_False.gif" alt="" width="16" height="16" align="absmiddle"/>
    <a href="#">This is a link...</a>
</div>
</body>
</html>
 

 

分享到：
| flex与flash元件交互
评论
2 楼 天梯梦 2014-03-05  
fireinjava 写道
单独input就不居中了

单独input居中的意义是什么？
1 楼 fireinjava 2014-03-03  
单独input就不居中了
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    关于div中img,span垂直居中的问题

    总而言之，在处理div中img和span的垂直居中问题时，关键是要理解CSS的vertical-align属性的适用范围及其工作原理，并根据实际情况选择合适的方法。对于初学者而言，掌握垂直居中技巧对于创建整齐和美观的Web页面至关...

    div 内table 居中实现代码

    针对这一需求，可以通过CSS（层叠样式表）来实现表格在div内部的水平居中以及垂直居中。 为了实现水平居中，CSS提供了一种非常简便的方法，即使用`margin`属性的`auto`值。当在table元素上设置`margin-left:auto;`...

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

    在文本框中，当`vertical-align`被设置为`middle`时，它会使文本框内的文字相对于该元素的中线进行对齐，从而达到垂直居中的效果。在示例中，`vertical-align: middle;`就是让文字在文本框内部上下居中。 2. **`...

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

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

    利用vertical-align:middle实现行内元素的水平垂直居中对齐

    在Web开发中，实现元素的水平垂直居中对齐是一个常见的布局需求。传统上，我们会使用Flexbox或CSS Grid等现代CSS布局技术来实现这一目标。但是，利用`vertical-align:middle`属性也能达到类似的效果，并且在某些情况...

    用CSS让按钮居中显示的思路及代码

    就是做到类似于下图这种效果 通过简单的Css样式就可以... 可以让你的div居中对齐。 .style{margin-left:auto;margin-right:auto;} 缩写形式为： .style{margin:0 auto;} 数字0 表示上下边距是0。可以按照需要设置成不

    搜索框符号居中

    - **Flexbox**：将父容器的display属性设为flex，并设置justify-content和align-items为center，这样子元素（包括输入框和图标）会水平和垂直居中。 ```css .search-container { display: flex; justify-...

    CSS实现让同一行文字和输入框对齐的方法

    然而，基线对齐往往不是我们想要的效果，尤其是在需要元素垂直居中时。 在没有明确设置`vertical-align`属性的情况下，输入框（如`&lt;input&gt;`元素）和相邻的文本内容通常不会垂直对齐，这会导致它们看起来并不协调。...

    CSS对浏览器的兼容性性处理(IE7,6与Fireofx)

    从网上收集了IE7,6与Fireofx的兼容性处理方法并整理了一下.对于浏览器的兼容性问题,请尽量用符合W3C标准格式写代码。而且DOCTYPE 影响 CSS 处理,作为W3C的标准,一定要加 ... 然后插入文字，就垂直居中了。缺点是要控

    jsp浏览器的兼容性

    为了实现垂直居中，需要将 line-height 设置为当前 Div 相同的高度，然后通过 vertical-align: middle 实现。 11.导航菜单上的 a 标签内容加上样式 在导航菜单上的 a 标签内容加上样式时，需要设置 display: block...

    表单元素对齐

    /* Flexbox 垂直居中 */ .flex-vertical-center { display: flex; align-items: center; } ``` 在HTML中，可以直接应用这些样式： ```html &lt;div class="center-align"&gt; 用户名： &lt;input type="text" id=...

    通过简单的css样式让按钮居中显示

    它可以轻松地实现子元素的水平和垂直居中： ```css .container { display: flex; justify-content: center; align-items: center; } ``` ```html &lt;div class="container"&gt; 点击我 &lt;/div&gt; ``` 在`display: ...

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

    `将其垂直居中对齐，同时添加`padding: 2px;`为元素留出适当的内边距，提高可读性。 3. `label`: 选择所有的`label`元素，同样设置`vertical-align: middle;`使其与`checkbox`元素对齐。 接下来是使用示例： ```...

    JQuery&CSS;&CSS;+DIV实例大全.rar

    4.jQuery超炫淡入淡出效果DIV渐变居中弹出框插件下载 5.jquery黑色+蓝色风格DIV提示框示例 6.一款jQuery+DIV居中淡入淡出信息提示框示例 7.一款jQuery可拖动提示窗插件(对话框Dialog插件) 8.一款基于jQuery...

    前端开发面试题及答案.pdf

    `结合，让层在浏览器中垂直居中。 8. Firefox嵌套`div`的居中问题： 在父`div`中设置`text-align: center;`，子`div`设置`margin: 0 auto;`，可实现子`div`在父`div`中水平居中。 9. Web标准网站的优点： - 快速...

    腾讯企业邮箱登录摆放水平垂直设置

    在这个示例中，我们使用CSS（层叠样式表）设置了页面的水平垂直居中，并为登录表单设计了美观的样式。`justify-content: center;` 和 `align-items: center;` 是用于实现水平和垂直居中的关键CSS属性。登录按钮的...

    html+css面试题答案.docx

    行内元素包括 a、b、span、img、input、strong、select、label、em、button、textarea 等，块级元素包括 div、ul、li、dl、dt、dd、p、h1-h6、blockquote 等，空元素包括 br、meta、hr、link、input、img 等。...

    46种常见的浏览器兼容性问题大汇总

    9. Div的垂直居中问题 3 10. margin加倍的问题 3 11. IE与宽度和高度的问题 3 12. 页面的最小宽度 3 13. DIV浮动IE文本产生3象素的bug 3 14. IE捉迷藏的问题 3 15. float的div闭合;清除浮动;自适应高度 ...

Magicbox
Global site tag (gtag.js) - Google Analytics