css - 如何使这个文字居中?
本文介绍了css - 如何使这个文字居中?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
问 题
<html>
<meta charset="utf-8"/>
<style type="text/css">
*{
padding:0;
margin:0;
}
div.menu{
width:800px;
height:27px;
border:1px solid red;
}
li{
height:27px;
line-height:27px;
text-align:center;
font-size:15px;
display:inline-block;
list-style-type:none;
}
</style>
<body>
<div class="menu">
<ul>
<li>首页</li>
<li><img src="images/nav_line.jpg" /></li>
<li>学院概况</li>
<li><img src="images/nav_line.jpg" /></li>
<li>机构设置</li>
<li><img src="images/nav_line.jpg" /></li>
<li>院系设置</li>
<li><img src="images/nav_line.jpg" /></li>
<li>招生就业</li>
<li><img src="images/nav_line.jpg" /></li>
<li>学院概况</li>
<li><img src="images/nav_line.jpg" /></li>
<li>国际交流</li>
<li><img src="images/nav_line.jpg" /></li>
<li>专家名师</li>
<li><img src="images/nav_line.jpg" /></li>
<li>教学教研</li>
<li><img src="images/nav_line.jpg" /></li>
<li>师资建设</li>
</ul>
</div>
</body>
</html>
图片nav_line.jpg如下
效果如下
由于有images/nav_line.jpg 这个图片(高度27px)li中的文字会和nav_line.jpg的下边缘对齐,现在如何使文字居中?位于div的中央?
解决方案
li加个属性vertical-align: middle;其他都不用改,即
li{
height:27px;
line-height:27px;
text-align:center;
font-size:15px;
display:inline-block;
list-style-type:none;
vertical-align: middle;
}
这篇关于css - 如何使这个文字居中?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文