这是我的
HTML：
.HCSI {
background-color: #fff;
height: auto;
width: 100%;
text-align: ;
position: fixed;
left: 0;
top: 0;
z-index: 0;
border: 2px solid #000;
border-radius: 25px;
}
.home,.csgo,.steam,.info {
z-index: 1;
background-color: rgba(50,150,250,0.5);
border: 2px solid #000;
padding: 10px 15px;
border-radius: 20px;
float: center;
}
.home:hover {
background-color: rgba(50,1);
}
.HCSI,li {
color: #000;
padding: 0px;
display: inline-block;
font-size: 21px;
font-weight: 100;
letter-spacing: 2.5px;
word-spacing: 90px;
}
<!DOCTYPE html>
<html>
<head>
<title>VusicVoid</title>
<link href="https://fonts.google.com/specimen/Shrikhand" rel="stylesheet">
</head>
<body>
<div class="HCSI">
<ul>
<a href="">
<li class="home">Home</li>
</a>
<a href="http://store.steampowered.com/app/730/">
<li class="csgo">Csgo</li>
</a>
<a href="">
<li class="steam">Steam</li>
</a>
<a href="">
<li class="info">Info</li>
</a>
</ul>
</div>
</body>
</html>
如果你把它们放在一个代码测试器中,那么白色的盒子里面应该有4个蓝色的盒子,但我的问题是我不能让所有4个盒子与白色盒子的中心对齐.我试图让蓝色框的所有边上的填充都相同.
解决方法
只需修复text-align
使它成为文本对齐：中心;
使它成为文本对齐：中心;
.HCSI {
background-color: #fff;
height: auto;
width: 100%;
text-align:center ;
position: fixed;
left: 0;
top: 0;
z-index: 0;
border: 2px solid #000;
border-radius: 25px;
}
