新浪博客

文本框input与文字 实现垂直居中对齐CSS！！

2012-08-03 11:17阅读：

http://blog.sina.cn/dpool/blog/u/1785418361

直接在文本框样式里加上此属性就可以了 vertical-align:middle

原文：http://www.yuzhiguo.com/articleview.asp?id=381
在进行div+css网页布局的时候，不可避免的需要插入一定的表单元素，input是其中最常见的一种。我们在布局中，常会遇到文本输入框与同处一行的文本不对齐的问题。这个问题设置input的vertical-align:middle属性来解决。
　　我们来看下面的例子，如何解决文本输入框与文本对齐的问题！

  1. <!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Strict//EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd'>
  2. <html xmlns='http://www.w3.org/1999/xhtml'>
  3. <head>
  4. <meta http-equiv='Content-Type' content=
'text/html; charset=utf-8' />
  • <title>resday.com</title>
  • <style type='text/css'>
  • <!--
  • #a {}{
  • height:30px;
  • border:1px solid #ccc;
  • }
  • #b {}{
  • margin-top:20px;
  • height:30px;
  • border:1px solid #ccc;
  • }
  • #a input {}{
  • width:200px;
  • height:30px;
  • border:1px solid red;
  • }
  • #b input {}{
  • width:200px;
  • height:30px;
  • border:1px solid red;
  • vertical-align:middle;
  • }
  • -->
  • </style>
  • </head>
  • <body>
  • <div id='a'><input type='text' />yuzhiguo.com - Div+CSS布局常见问题</div>
  • <div id='b'><input type='text' />yuzhiguo.com - Div+CSS布局常见问题</div>
  • </body>
  • </html>

  • 在a中是未设置的样子。文本与文本框不能垂直对齐，很不美观。
    在b中，设置了vertical-align:middle;解决了这一问题。文本与文本框垂直居中对齐。

我的更多文章

下载客户端阅读体验更佳

APP专享