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

只需使用flex即可。阅读它here

.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%;
    display: inline-flex;
}

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

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

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

如果您希望两个方框都占据相同的高度，则height和.footer-links上需要一个固定的.built-with。我在以下示例中使用了150px：

＆＃13;

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

＆＃13;

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

＆＃13;

除了Internet Explorer之外，每个浏览器中都有

Flexbox has support （尽管它也会进入IE）。如果您也想支持Internet Explorer，则可以使用vertical-align: middle和display: inline-block，如 this answer 中所示。

希望这有帮助！：）

Answer 3

使用table-cell作为显示属性

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

我认为，它会水平对齐这些方块

Answer 4

这是基于黑曜石年龄的答案，因为它没有更新以符合我的确切问题。

我将.footer-above编辑为1400px，因为width:100%代码不会随着视口宽度的变化而缩放。

此外，它应该是align-items: flex-start;类container，因为我想在父div的顶部有一个基线

.footer-above {
  width: 1400px;
  height: 200px;
  background-color: #aaa;
  padding-top: 30px;
  padding-bottom: 30px;
  color: white;
  font-size: 20px;
}

.footer-links,
.built-with {
  display: inline-block;
  width: 40%;
  height: 150px;
  border: 2px solid black;
}

.container {
  margin: 0 auto;
  width: 960px;
  display: flex;
  align-items: flex-start;
  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 -->

CSS两列布局未水平对齐

4 个答案: