标题文字无法垂直居中，而且有一项到了第二行

登录

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style type="text/css">

body {
background-image: url(imges/6-01.jpg);
background-repeat: no-repeat;
font-family: "微软雅黑", "Adobe 黑体 Std R";
font-size: 12px;
color: rgba(31,12,55,1);
}
#div {
width: 640px;
height: 55px;
margin-right: auto;
margin-left: auto;
margin-top: 191px;
}
.font01 {
color: rgba(255,255,255,1.00);
}
#div li {
width: 102px;
float: left;
list-style-type: none;
text-align: center;
height: 55px;
vertical-align: middle;
}

</style>
</head>

<body>
<div id="div">
<ul>
<li class="font01">网站首页</li>
<li>关于我们</li>
<li>美味体验</li>
<li>销售故事</li>
<li>我们的故事</li>
<li>联系我们</li>
</ul>
</div>
</body>
</html>

潜意式 · 发表于 2017-1-6 19:39:22

div属性添加line-height:55px;文字就可以垂直居中了，然后div的宽度增大一些，里边的li标签就不会到第二行了。

冰封的樱 · 发表于 2017-1-6 21:13:35

潜意式发表于 2017-1-6 19:39
div属性添加line-height:55px;文字就可以垂直居中了，然后div的宽度增大一些，里边的li标签就不会到第二行 ...

好的，谢谢

[作业] 标题文字无法垂直居中，而且有一项到了第二行

本帖子中包含更多资源

共2个回复最后回复于 2017-1-6 21:13

	B Color Image Link Quote Code Smilies 高级模式您需要登录后才可以回帖登录 \| 立即注册本版积分规则回帖后跳转到最后一页

[作业] 标题文字无法垂直居中，而且有一项到了第二行

本帖子中包含更多资源

共2个回复 最后回复于 2017-1-6 21:13

共2个回复最后回复于 2017-1-6 21:13