父级元素设置text-align: center;,子级块元素设置display: inline;后,子级元素需要设置line-height:等于父级元素的高度来实现子级元素居中显示。注:此时子级元素设置width、height不管用。
line-heigth 属性是针对:父元素高度确定的单行文本(内联元素)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
border: 0;
padding: 0;
}
#box{
text-align: center;
height: 90px;
text-align: center;
border: 1px solid pink;
}
ul li{
display: inline;
line-height: 90px;
list-style: none;
border: 1px solid pink;
}
</style>
</head>
<body>
<div id="box">
<ul>
<li>首页</li>
<li>我的文章</li>
<li>联系我们</li>
</ul>
</div>
</body>
</html>
div中列表居中显示
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
border: 0;
padding: 0;
}
ul{
width: 450px;
height: 90px;
margin: 0 auto;
}
ul li{
width: 150px;
height: 90px;
line-height: 90px;
float: left;
text-align: center;
list-style: none;
}
</style>
</head>
<body>
<div id="box">
<ul>
<li>首页</li>
<li>我的文章</li>
<li>联系我们</li>
</ul>
</div>
</body>
</html>