论坛

标题: 标题文字无法垂直居中，而且有一项到了第二行 [打印本页]

作者: 冰封的樱 时间: 2017-1-5 21:58
标题: 标题文字无法垂直居中，而且有一项到了第二行

[attach]78657[/attach]

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

作者: 冰封的樱 时间: 2017-1-6 21:13

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

好的，谢谢

欢迎光临论坛 (http://bbs.qinxue.com/)