无法在 CSS 中居中 h1 标签

Question

我是一名网络开发初学者，我在将 h1 文本居中时遇到问题。我正在使用

text-align: center

属性，但文本未居中。

我也无法在“定价、功能和博客”菜单与“登录”和“注册”按钮之间获得相等的空间。

我正在使用

justify-content: space-between

属性，但“定价、功能和博客”菜单与按钮之间的间距小于按钮之间的间距。

body {
  background: url(BG.png);
  font-family: "Inter", sans-serif;
  margin: 0;
  padding: 0;
}

header {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  margin-top: 72px;
  margin-left: 80px;
  margin-right: 80px;
  /* border: 1px solid black; */
}

p.logo {
  color: white;
  font-size: 16px;
  font-weight: 700;
  /* border: 1px solid black; */
}

.menu {
  display: flex;
  gap: 56px;
  color: white;
  font-size: 16px;
  font-weight: 500;
  /* border: 1px solid black; */
}

.cta {
  display: flex;
  gap: 56px;
  font-size: 16px;
  font-weight: 500;
  /* border: 1px solid black; */
}

.cta > button {
  color: white;
  width: 122px;
  background-color: #091d57;
  border-radius: 30px;
  font-size: 16px;
  font-weight: 500;
}

h1 {
  color: white;
  font-size: 52px;
  font-weight: 800;
  max-width: 632px;
  text-align: center;
  border: 1px solid black;
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Maze</title>
    <link rel="stylesheet" href="./styles.css" />
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link
      href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700;800&display=swap"
      rel="stylesheet"
    />
  </head>
  <body>
    <header>
      <p class="logo">Maze</p>
      <div class="menu">
        <p>Features</p>
        <p>Pricing</p>
        <p>Blog</p>
      </div>
      <div class="cta">
        <p>Sign in</p>
        <button>Sign up</button>
      </div>
    </header>
    <h1>Upgrade your skills for a better future</h1>
  </body>
</html>

我尝试将 h1 文本居中并在按钮之间均匀分配空间，但我的努力没有成功。

我也在网上寻找解决方案，但一直找不到解决方案。

Answer 1

使用 h1 时，文本实际上居中。（尝试设置

font-size: 16px

进行测试，您会注意到文本实际上在边框框内居中）。但是，由于您已经为 h1 设置了

max-width:623px;

并给定了边框，所以现在框的宽度不是固定的完整宽度，您可以通过在左侧和右侧设置自动边距来使用 CSS 对齐整个组合。

margin: 0 auto;

这意味着

margin-left

是自动的，

margin-right

是自动的，它将整个框设置为中心。

进入问题的 B 部分。关于菜单项和按钮之间的间距相等，问题是：

您有自己的菜单容器（带有

class="menu"

的包装器）和一个容器（带有

class="cta"

的包装器），尽管在每个容器的容器内，空间是相等的，但在整个标题上，我们需要小心地将这些物品放置在可用空间内。 Flexbox 使用为放置物品提供的空间。因此，您需要根据设计仔细执行此操作。（请提供菜单设计）

谢谢

无法在 CSS 中居中 h1 标签

问题描述投票：0回答：1

1个回答

最新问题

无法在 CSS 中居中 h1 标签

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1