HTML和CSS使几个Div在同一行上对齐

Question

我正在制作一个顶部带有导航菜单的网站。我有多个按钮和下拉菜单。我想在同一高度连续制作按钮，我希望按钮位于中间。这是我的代码：

/* Links CSS */

a,
a:visited,
a:active {
  text-decoration: underline;
  color: white;
}
a:hover {
  color: red;
  text-decoration: underline;
}
/* Element CSS */

html,
body {
  margin: 0px;
  background-color: white;
}
html {
  height: 100%;
  width: 100%;
  box-sizing: border-box;
}
*,
*:before,
*:after {
  box-sizing: inherit;
}
body {
  position: relative;
  padding-bottom: 6rem;
  min-height: 100%;
}
.button,
.games,
.programs,
.apps,
.misc {
  font-family: 'Arsenal';
  font-size: 18px;
  text-decoration: underline;
  background: transparent;
  padding-top: 1%;
  padding-bottom: 1%;
  padding-left: 1.5%;
  padding-right: 1.5%;
  cursor: pointer;
  border: 0px;
}
.content {
  font-family: 'Arsenal';
  font-size: 15px;
  text-decoration: none;
  background-color: white;
  border: 0px;
  cursor: pointer;
}
.button:hover,
.content:hover,
.games:hover,
.programs:hover,
.apps:hover,
.misc:hover {
  background-color: #f0efef;
}
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
  padding: 0.5%;
}
.games-dropdown {
  position: relative;
  display: inline-block;
}
.progams-dropdown {
  position: relative;
  display: inline-block;
}
.apps-dropdown {
  position: relative;
  display: inline-block;
}
.misc-dropdown {
  position: relative;
  display: inline-block;
}
.show {
  display: block;
}
/* Div CSS */

#page {
  margin-top: 0px;
}
#title {
  font-family: 'Arsenal';
  font-size: 37px;
  padding-top: 0.5%;
  color: black;
  display: inline-block;
  cursor: pointer;
}
#links {
  margin: auto;
  display: inline-block;
  overflow: auto;
}
#content {
  background-color: white;
  border: 1px solid black;
  border-radius: 3px;
  margin-left: 10%;
  margin-right: 10%;
  box-shadow: 1px 1.5px #8f8f8f;
}
#footer {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 1rem;
  background-color: #f0efef;
  text-align: center;
  border-top: 1px solid black;
  font-family: 'Arsenal';
  font-size: 15px;
}

<!-- HTML -->
<center>
  <div id="links">
    <!--  Code For Dropdown Menus | Code From http://www.w3schools.com/ | Thanks To Them!-->
    <!--  Games Dropdown Menu: Browser and Downloadable-->
    <div class="programs-dropdown">
      <button class="programs" onclick="games()" title="Games">Games</button>
      <div id="gamesDropdown" class="dropdown-content">
        <button class="content" onclick="download()">Download</button>
        <button class="content" onclick="online()">Online</button>
      </div>
    </div>
    <!--  Programs Dropdown Menu: Windows and Max OS X-->
    <div class="programs-dropdown">
      <button class="programs" onclick="programs()" title="Programs">Programs</button>
      <div id="programsDropdown" class="dropdown-content">
        <button class="content" onclick="windows()">Windows</button>
        <button class="content" onclick="mac()">Mac OS X</button>
      </div>
    </div>
    <button class="button" onclick="websites()" title="Websites">Websites</button>
    <button class="button" onclick="home()" title="Home">Home</button>
    <!-- Apps Dropdown Menu: IOS and Android -->
    <div id="apps-dropdown">
      <button class="apps" onclick="apps()" title="Apps">Apps</button>
      <div id="appsDropdown" class="dropdown-content">
        <button class="content" onclick="ios()">IOS</button>
        <button class="content" onclick="android()">Android</button>
      </div>
    </div>
    <button class="button" onclick="blog()" title="Blog">Blog</button>
    <!--  Misc. Dropdown Menu: Chrome Extensions, GitHub, Etc.-->
    <div id="misc-dropdown">
      <button class="misc" onclick="misc()" title="Misc.">Misc.</button>
      <div id="miscDropdown" class="dropdown-content">
        <button class="content" onclick="chrome()">Chrome Extensions</button>
        <button class="content" onclick="github()">GitHub</button>
      </div>
    </div>
  </div>
</center>

Answer 1

使元素居中的最简单方法是使用flexbox。 您可以在https://css-tricks.com/snippets/css/a-guide-to-flexbox/

了解更多信息

使用flexbox中心元素实际上非常简单。假设你有一组元素：

<div class="elements">
  <div class="element__item">Element one</div>
  <div class="element__item">Element two</div>
  <div class="element__item">Some other element</div>
</div>

您可以将它们水平放置并放大;像这样垂直使用css：

.elements {
  display: flex;
  justify-content: center;
  align-items: center;
}

您可以在JSfiddle上查看：https://jsfiddle.net/kf405784/