ul li 下图片文字垂直居中

来源：互联网发布：如何注册香港域名编辑：程序博客网时间：2024/04/28 16:16

html代码如下：

<!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" xml:lang="en"><head>    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />    <title>首页</title>    <link rel="stylesheet" type="text/css" href="css/index.css" /></head><body>    <div id="page">        <div id="header">            <div id="contact" class="contact">                <ul>                    <li class="contact-message"><a href="#"><em></em>cqm8@163.com</a></li>                    <li class="contact-phone"><a href="#"><em></em>+86 898 234566</a></li>                </ul>            </div>        </div>        <div id="content">            <div id="main" class="main">                            </div>        </div>        <div id="footer">                    </div>    </div></body></html>

对应的css代码如下：

.contact ul li {  float: left;  display: inline;  padding: 0 10px;  list-style-type: none;}.contact a {  font-size: 12px;  color: #909090;  display: block;  text-decoration: none;  height: 15px;  line-height: 15px;}.contact em {  float: left;  overflow: hidden;  margin-right: 5px;}.contact-message em {  width: 15px;  height: 11px;  margin-top: 2px;  background: url(../img/201412201814_03.png) no-repeat;}.contact-phone em {  width: 9px;  height: 15px;  background: url(../img/201412201814_04_03.png) no-repeat;}

0 0