老师，选择项的文字不能居中，怎么办？
2、老师，选择项的文字不能居中，怎么办？
2、还有一个不明白，就是选择项的header-box的宽度，为什么不是四个span+边框的距离呢？不知道怎么设定
--------------------
html 文件
————————
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<!-- 插入css样式 -->
<link rel="stylesheet" href="../css/css5.css">
</head>
<body>
<!-- 选择项 -->
<div class="header-box" id="header-box">
<span class="clickcolor" >首页</span>
<span>点击看看</span>
<span>会自动的</span>
<span>我的网站</span>
</div>
<!-- banner图 -->
<div class="banner-box">
<div class="banner num1"></div>
<div class="banner num2" ></div>
<div class="banner num3" ></div>
<div class="banner num4" ></div>
</div>
<!-- 插入script -->
<script src="../js5/js5.js"></script>
</body>
</html>
-----------
css
--------------
/* 全局样式 */
* {
margin: 0px;
padding: 0px;
}
/* 选择项的样式 */
.header-box {
width: 1145px;
height: 68px;
border: 1px rgb(189, 187, 187) solid;
margin: 0px auto;
margin-top: 50px;
}
.header-box span {
width: 280px;
display: inline-block;
font-size: 22px;
margin:0 auto;
font-family: Microsoft YaHei;
color: #666;
line-height: 68px;
border: 1px #FFF solid;
}
.clickcolor {
background-color: #ffcc00;
border-radius: 8px 8px;
color: black;
font-weight:bold;
}
/* banner图的样式 */
.banner-box {
width: 1145px;
height: 500px;
margin: 0 auto;
position: relative;
overflow:hidden;
}
.banner{width: 1200px;
height: 500px;
display:none;
background-size: 100%;
position: absolute;
left: 0px;
top: 0px;
display: none;
}
.num1 {
background: url(../img5/1.jpg) no-repeat;
display:block;
}
.num2 {
background: url(../img5/3.jpg) no-repeat;
}
.num3 {
background: url(../img5/4.jpg) no-repeat;
}
.num4 {
background: url(../img5/5.jpg) no-repeat;
}
正在回答 回答被采纳积分+1
同学你好，问题解答如下：
1. margin和line-height分别实现水平和垂直居中。
其中margin：0 auto；可以让块级元素实现居中(水平居中)，并且这个块级元素还需设置宽度，它无法让行内块水平居中，如下：
而line-height是设置文本的行高，通常利用它让文字垂直居中，如下：
另外文本的水平居中，可以通过给父元素设置text-align：center；实现，如下：
而行内块也可以通过给父元素设置text-align：center；实现水平居中。
2. 给父元素设置font-size：0px；之所以不会影响span，是因为span标签设置了字体大小，如下：
所以span标签的字体大小会以自己的样式为主。
祝学习愉快！
相似问题
登录后可查看更多问答，登录/注册
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星