文字垂直居中常用技巧

1.当行文字垂直居中

设置高度和行高相等

例如：

<ul>
  <li><a href="#" title="nav1" target="_self">nav1</a><li> 
  <li><a href="#" title="nav2" target="_self">nav2</a></li>
  <li><a href="#" title="nav3" target="_self">nav3</a></li>
</ul>

设置a的行高和高度相等即可。

 

2.多行文字垂直居中

<div style="padding:10px 0;">此处显示新 Div 标签的内容</div>

设置填充上下相等即可。

 

3.input文字垂直居中

<style type="text/css">
.bg {
 background:url(images/search_bg.gif) no-repeat;
 font-size:12px;
 padding:8px 0;
 border:none;
 line-height:29px;
 color:#ccc;
 _height:29px;
 _padding:0;
}
</style>

<input name="search" type="text" class="bg" value="请输入您的关键字" size="100" />

设置行高等于上下填充和文字大小之和即可，为了兼容ie6给ie6单独定义高度，去除填充值。