html - CSS 两列布局未水平对齐

Question

我希望“关于本页”和“网络周边”水平对齐。

另外，请接受任何改进这段代码的建议。我只想在宽阔的彩色背景后面有一个响应式/简单的两列布局。

.footer-above {
    width: 100%;
    height: 200px;
    background-color: #aaa;
    padding-top: 30px;
    padding-bottom: 30px;
    color: white;
    font-size: 20px;
}

.footer-links,
.built-with {
    display: inline-block;
    max-width: 40%;
    height: 100%;
    border: 2px solid black;
}

.container {
    margin: 0 auto;
    width: 500px;
    height: 100%;
}

<div class="footer-above">
    <div class="container">
        <div class="built-with">
            <h3>ABOUT THIS PAGE</h3>
            <p> Made with HTML5Boilerplate</p>
         </div><!--built-with-->
         <div class="footer-links">
            <h3>AROUND THE WEB</h3>
         </div><!--footer-links-->
    </div><!--container-->
</div><!-- footer-above -->

Answer 1

我建议为此使用 flexbox ，这可以通过简单地添加来实现:

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

如果你想让两个盒子占据相同的高度，你需要在 .footer-links 和 .built-with< 上设置固定的 height/。在以下示例中，我使用了 150px:

.footer-above {
  width: 100%;
  height: 200px;
  background-color: #aaa;
  padding-top: 30px;
  padding-bottom: 30px;
  color: white;
  font-size: 20px;
}

.footer-links,
.built-with {
  display: inline-block;
  max-width: 40%;
  height: 150px;
  border: 2px solid black;
}

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

<div class="footer-above">
  <div class="container">
    <div class="built-with">
      <h3>ABOUT THIS PAGE</h3>
      <p> Made with HTML5Boilerplate</p>
    </div><!--built-with-->
    <div class="footer-links">
      <h3>AROUND THE WEB</h3>
    </div><!--footer-links-->
  </div><!--container-->
</div><!-- footer-above -->

Flexbox has support 在除 Internet Explorer 之外的每个浏览器中(尽管它也将出现在 IE 中)。如果你也想支持 Internet Explorer，你可以使用 vertical-align: middle 和 display: inline-block，如 this answer 所示.

希望对您有所帮助! :)