HTML，CSS：文本与显示对齐：内联不起作用

Question

我正在尝试建立一个网站。文本对齐：中心不能与display：inline-block一起使用但是我的text-align有什么办法可以使用display：inline-block？

body {
  font-family: sans-serif, 'Helvetica';
  background-color: #f9f9f9;
  text-align: center;
}
.dropdown {
  position: relative;
}
.dropdown-content {
  display: none;
  position: absolute;
  min-width: 100px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
}
.dropdown-content a {
  display: block;
}
.dropdown:hover .dropdown-content {
  display: block;
}
#my_cycle_head {
  text-align: center;
}
#main_navbar {
  text-align: center;
}
#main_navbar li {
  list-style-type: none;
  padding-right: 20px;
  display: inline;
}
#main_navbar li a {
  text-decoration: none;
  text-align: center;
  overflow: hidden;
}

<header>
  <h1 id="my_cycle_head">My Cycle</h1>
  <ul id="main_navbar">
    <li>
      <a href="#">Home</a>
    </li>
    <li class="dropdown">
      <a class="dropbtn">Dropdown</a>
      <div class="dropdown-content">
        <a href="#">Link 1</a>
        <a href="#">Link 2</a>
        <a href="#">Link 3</a>
      </div>
    </li>
    <li>
      <a href="faq.html">FAQ's</a>
    </li>
    <li>
      <a href="about.html">About</a>
    </li>
  </ul>
</header>

Answer 1

使用display: inline时，元素会调整为内容的宽度。因为没有简单的方法来集中它。

但是，如果您使用display: inline-block;，它会将两者结合起来，它是内联的（前后没有中断），但也可以设置宽度。

#main_navbar li {
 list-style-type: none;
 padding-right: 20px;
 display: inline-block;
}

Answer 2

您可以在开始和结束 div 标签之间添加链接，如下所示：

<div style="text-align:center;">
    <a href="home-page.html">Homepage</a>
    <a href="contact-page.html">Contact</a>
</div>