logo标签列表

将元素对齐到另一个元素的中心

htmlcsselement
6
这是我的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，请不要忘记如果下面任何一个答案是正确的，请接受答案，这可能会激励其他人。 - Jishnu V S
4个回答
2
尝试使用这个答案给出的 ul text-align:center; 将使锚点居中，并添加 text-decoration:line-through; 到 a 标签，使线条垂直居中。 

/* styleSheet */

.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;
}
.HCSI ul {
 padding-left: 0;
 text-align: center;
}
.HCSI ul a {
 text-decoration:line-through;
}
.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;
}
<!-- HTML -->

<!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>

2

您可以使用 CSS Flexbox。

只需应用 Flex 容器属性 (display: flex)，并使用 Flex 对齐属性 (justify-content: center) 和 Flex 对齐属性 (align-items: center)，即可轻松实现居中布局。

请查看下面代码中的用法示例：

/* Parent Element (Flex Container) */
.HCSI {
  display: flex;
  justify-content: center; /* Center the content horizontaly */
  padding: 20px;
  border: 2px solid #000;
  border-radius: 25px;
}

/* Resetting <ul> (Flex Container) */
ul {
  list-style: none;
  display: flex;
  justify-content: center;
  margin: 0;
  padding: 0;
}

/* <li> Styles */
ul li {
  color: #000;
  margin: 0 10px;
  font-size: 21px;
  font-weight: 100;
  letter-spacing: 2.5px;
  background-color: rgba(50, 150, 250, 0.5);
  border: 2px solid #000;
  border-radius: 20px;
}

/* <a> Styles */
ul li a {
  display: block;
  color: #000;
  padding: 10px 15px;
  border-radius: 18px;
  text-decoration: none;
}

/* <a> Hover Styles */
ul li a:hover {
  text-decoration: none;
  background-color: rgba(50, 150, 250, 1);
}
<div class="HCSI">
  <ul>
    <li class="home"><a href="">Home</a></li>
    <li class="csgo"><a href="http://store.steampowered.com/app/730/">Csgo</a></li>
    <li class="steam"><a href="">Steam</a></li>
    <li class="info"><a href="">Info</a></li>
  </ul>
</div>

了解更多关于CSS Flexbox的内容。

希望这可以帮到你！

2

只需修复text-align 将其改为text-align:center;

.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;
}
1
如果你想让盒子在中心聚集，并具有定义的间隙，那么这个方法可以解决问题。
.HCSI ul {
  display: table;
  margin: 0 auto;
  padding-left: 0;
}

.HCSI ul a {
  /* Adjust this value to adjust the spacing around the buttons */
  padding: 20px;
  display: table-cell;
}

如果您希望将盒子均匀分布在栏上，则可以添加以下内容。
.HCSI ul {
  display: table;
  margin: 0 auto;
  padding-left: 0;
  width: 100%;
}

.HCSI ul a {
  padding: 20px;
  display: table-cell;
  text-align: center;
}
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接