Question

您好我是HTML / CSS的新手。我正在尝试使用网站标题和位于其下方的导航栏创建网站标题。我想把这两个元素集中在一起： desired outcome

但目前它看起来像这样： elements not centered

到目前为止，这是HTML：

<body>
<header>
    <!-- HEADER TITLE -->
    <div>
        <h1 id="logo">Title Logo Header</h1>
    </div>

    <!-- NAVIGATION -->
    <div id="menu-bar">
        <ul id="menu-options">
            <li><a href="#">Home</a></li>
            <li><a href="#">Explorations</a></li>
            <li><a href="#">Blog</a></li>
            <li><a href="#">Info</a></li>
            <li><a href="#">Contact</a></li>
        </ul>
    </div>

</header>

</body>

到目前为止这是CSS：

header {
    font-family: 'Cinzel';
    display: block;
    text-align: center;
    color: black;
}


#menu-bar {
    margin: 0 auto;
    text-align: center;
}

#menu-options li{
    display: inline-block;
    padding: 10px;
}

我在网上看过类似的问题并尝试过提议的解决方案，但似乎都没有。

提前致谢！

Answer 1

你试过这个：

保证金：0px自动0px自动

您想要居中

通常很有效。

谢谢。

答案 1 :(得分：0)

#menu-options {
  padding:0;
}

这是你错过的CSS。

答案 2 :(得分：0)

尝试添加此CSS：

ul {
  -webkit-margin-before: 0;
  -webkit-margin-after: 0;
  -webkit-padding-start: 0;
  -moz-margin-before: 0;
  -moz-margin-after: 0;
  -moz-padding-start: 0;
  margin-before: 0;
  margin-after: 0;
  padding-start: 0;
}

答案 3 :(得分：0)

添加此规则以重置ul元素的默认填充：

#menu-bar ul {
  padding: 0;
}

＆＃13;

header {
  font-family: 'Cinzel';
  display: block;
  text-align: center;
  color: black;
}

#menu-bar {
  margin: 0 auto;
  text-align: center;
}

#menu-bar ul {
  padding: 0;
}

#menu-options li {
  display: inline-block;
  padding: 10px;
}

＆＃13;

<header>
  <!-- HEADER TITLE -->
  <div>
    <h1 id="logo">Title Logo Header</h1>
  </div>

  <!-- NAVIGATION -->
  <div id="menu-bar">
    <ul id="menu-options">
      <li><a href="#">Home</a></li>
      <li><a href="#">Explorations</a></li>
      <li><a href="#">Blog</a></li>
      <li><a href="#">Info</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </div>

</header>

＆＃13;

Answer 2

#menu-options {
  padding:0;
}

这是你错过的CSS。

Answer 3

尝试添加此CSS：

ul {
  -webkit-margin-before: 0;
  -webkit-margin-after: 0;
  -webkit-padding-start: 0;
  -moz-margin-before: 0;
  -moz-margin-after: 0;
  -moz-padding-start: 0;
  margin-before: 0;
  margin-after: 0;
  padding-start: 0;
}

Answer 4

添加此规则以重置ul元素的默认填充：

#menu-bar ul {
  padding: 0;
}

＆＃13;

header {
  font-family: 'Cinzel';
  display: block;
  text-align: center;
  color: black;
}

#menu-bar {
  margin: 0 auto;
  text-align: center;
}

#menu-bar ul {
  padding: 0;
}

#menu-options li {
  display: inline-block;
  padding: 10px;
}

＆＃13;

<header>
  <!-- HEADER TITLE -->
  <div>
    <h1 id="logo">Title Logo Header</h1>
  </div>

  <!-- NAVIGATION -->
  <div id="menu-bar">
    <ul id="menu-options">
      <li><a href="#">Home</a></li>
      <li><a href="#">Explorations</a></li>
      <li><a href="#">Blog</a></li>
      <li><a href="#">Info</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </div>

</header>

＆＃13;

无论文本对齐如何，都将div元素居中

4 个答案: