html – 将元素与另一个元素的中心对齐

发布时间：2020-12-14 19:45:35 所属栏目：资源来源：网络整理

导读：这是我的 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: rg

这是我的 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;
}

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!