Html CSS两列布局未水平对齐

我希望“关于此页面”和“关于web”水平对齐

此外，欢迎提出任何改进这段代码的建议。我只想在宽颜色背景后面有一个响应迅速/简单的两列布局

上面的

.footer{
宽度：100%；
高度：200px；
背景色：#aaa；
填充顶部：30px；
填充底部：30px；
颜色：白色；
字体大小：20px；
}
.页脚链接，
.用{
显示：内联块；
最大宽度：40%；
身高：100%；
边框：2件纯黑；
}
.集装箱{
保证金：0自动；
宽度：500px；
身高：100%；
}

关于本页
用HTML5样板制作

围绕网络

只需使用

flex

。读一读

上面的

.footer{
宽度：100%；
高度：200px；
背景色：#aaa；
填充顶部：30px；
填充底部：30px；
颜色：白色；
字体大小：20px；
}
.页脚链接，
.用{
显示：内联块；
最大宽度：40%；
身高：100%；
边框：2件纯黑；
}
.集装箱{
保证金：0自动；
宽度：500px；
身高：100%；
显示：内联flex；
}

关于本页
用HTML5样板制作

围绕网络

只需使用

flex

。读一读

上面的

.footer{
宽度：100%；
高度：200px；
背景色：#aaa；
填充顶部：30px；
填充底部：30px；
颜色：白色；
字体大小：20px；
}
.页脚链接，
.用{
显示：内联块；
最大宽度：40%；
身高：100%；
边框：2件纯黑；
}
.集装箱{
保证金：0自动；
宽度：500px；
身高：100%；
显示：内联flex；
}

关于本页
用HTML5样板制作

围绕网络

我建议为此使用，只需添加：

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

如果希望两个框占据相同的高度，则需要在

页脚链接和
上设置固定的
高度。在以下示例中，我使用了
150px
：


上面的
.footer{
宽度：100%；
高度：200px；
背景色：#aaa；
填充顶部：30px；
填充底部：30px；
颜色：白色；
字体大小：20px；
}
.页脚链接，
.用{
显示：内联块；
最大宽度：40%；
高度：150像素；
边框：2件纯黑；
}
.集装箱{
显示器：flex；
对齐项目：居中；
证明内容：中心；
}

关于本页
用HTML5样板制作

围绕网络
我建议为此使用，只需添加：

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

如果希望两个框占据相同的高度，则需要在
页脚链接和
上设置固定的
高度。在以下示例中，我使用了
150px
：


上面的
.footer{
宽度：100%；
高度：200px；
背景色：#aaa；
填充顶部：30px；
填充底部：30px；
颜色：白色；
字体大小：20px；
}
.页脚链接，
.用{
显示：内联块；
最大宽度：40%；
高度：150像素；
边框：2件纯黑；
}
.集装箱{
显示器：flex；
对齐项目：居中；
证明内容：中心；
}

关于本页
用HTML5样板制作

围绕网络
使用表格单元格作为显示属性

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

我认为，它将水平对齐这些框
使用表格单元格作为显示属性

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

我想，它将水平对齐这些框
这是基于黑曜石时代的答案，因为它没有更新以匹配我的确切问题

我将上面的
.footer
编辑为1400px，因为
宽度：100%
带有代码的视图不会随着视口宽度的变化而缩放

此外，它应该是
align items:flex start在
容器
类上，因为我希望在父div的顶部有一个基线


上面的
.footer{
宽度：1400px；
高度：200px；
背景色：#aaa；
填充顶部：30px；
填充底部：30px；
颜色：白色；
字体大小：20px；
}
.页脚链接，
.用{
显示：内联块；
宽度：40%；
高度：150像素；
边框：2件纯黑；
}
.集装箱{
保证金：0自动；
宽度：960px；
显示器：flex；
调整项目：灵活启动；
证明内容：中心；
}

关于本页
用HTML5样板制作

围绕网络
这是基于黑曜石时代的答案，因为它没有更新以匹配我的确切问题

我将上面的
.footer
编辑为1400px，因为
宽度：100%
带有代码的视图不会随着视口宽度的变化而缩放

此外，它应该是
align items:flex start在
容器
类上，因为我希望在父div的顶部有一个基线


上面的
.footer{
宽度：1400px；
高度：200px；
背景色：#aaa；
填充顶部：30px；
填充底部：30px；
颜色：白色；
字体大小：20px；
}
.页脚链接，
.用{
显示：内联块；
宽度：40%；
高度：150像素；
边框：2件纯黑；
}
.集装箱{
保证金：0自动；
宽度：960px；
显示器：flex；
调整项目：灵活启动；
证明内容：中心；
}

关于本页
用HTML5样板制作

围绕网络
出于好奇，您是否也有非flexbox解决方案。顺便说一句，这使得overrode
margin:0auto
不再居中对齐。您可以使用
表格
和
表格单元格
您是否有我们所说的非flexbox解决方案