中心這是我的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, 150, 250, 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個盒子與白色中心對齊。我試圖讓藍色框的所有邊上的填充是相同的。
? – Gacci
親愛的@Vusic Void請不要忘記接受答案,如果任何人給出的答案是正確的,這可能是對他人的啓發 –