Question

这是我的HTML：

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

如果你把它们放在一个代码测试器里，那么白色的盒子里面应该有4个蓝色的盒子，但我的问题是我不能让所有4个盒子与白色盒子的中心对齐。我试图让蓝色框的所有边上的填充都相同。

Answer 1

只需修正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;
}

Answer 2

尝试使用此答案给出ul text-align：center; 它会使锚点居中并将 text-decoration：line-through; 添加到一个标记中垂直居中的线

＆＃13;

/* 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;
}

＆＃13;

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

＆＃13;

Answer 3

您可以使用 CSS Flexbox 。

只需使用Flex Justify（display: flex）和Flex Alignment（justify-content: center）属性应用Flex容器（align-items: center）属性。

在下面的代码中查看我如何使用它们：

＆＃13;

/* 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);
}

＆＃13;

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

＆＃13;

详细了解 CSS Flexbox

希望这有帮助！

Answer 4

如果你希望聚集在中心的盒子有一个明确的间隙，那么这就可以了。

.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;
}

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

4 个答案: