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

我希望“关于此页面”和“围绕网络”水平对齐。

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

.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 -->

最佳答案

我建议为此使用flexbox，只需添加以下内容即可实现：

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

如果要使两个框都占据相同的高度，则需要在height和.footer-links上固定一个.built-with。在以下示例中，我使用了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 -->

除了Internet Explorer之外，每个浏览器中都可以使用Flexbox has support（尽管IE也可以使用它）。如果您还希望支持Internet Explorer，则可以将vertical-align: middle和display: inline-block一起使用，如this answer中所示。

希望这可以帮助！ :)

关于html - CSS两列布局未水平对齐，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/47384499/