大家都知道有时候一个文本输入框和一段文字在同一行上显示，然而它们总不是垂直居中，看上去不美观，这段CSS代码就是解决这一问题的，上边一行是没有定义，下边一行是定义过的，可以看出有明显的差别。
<!--CTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "-->
<html> <head> <title>CSS让同一行文字和输入框对齐</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <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 />Text1</div> <div id="b"><input />Text2</div> </body> </html>