有没有更好的方法将容器中的 2 列居中对齐？

Question

我正在设计我网站的 "portfolio" 部分，但我很难找到 'best'（主观）方法来拥有一个包含 2 列的容器，将每列中的内容居中类似于 this website's "web development" 部分。我尝试使用 flexbox，但想知道我是否使用了我想要实现的最佳方法，或者是否有更好的方法来获得相同的结果？

在此处查看我当前的代码：http://codepen.io/muygalan/pen/ZOVQgm

See above link for code.

Answer 1

我想说您不必真的使用 flexbox 来实现这一点，它非常简单。 Here's codepen 上的一个工作示例，仅使用 float 和 media query。我假设您想获得与您提供的网站相同的结果，在移动设备上，两列相互堆叠，图像始终位于第一位；避免 flexbox 的最简单方法是稍微修改您的 html 标记。

我尽量让 CSS 保持纤细和笔直。

.portfolio{
  max-width: 1020px;
  margin: 0 auto;
  clear: both;
}
.port-col-left,
.port-col-right{
  width: 100%;
  float: left;
  text-align: center;
}
@media screen and (min-width:992px){
  .port-col-left,
  .port-col-right{
    width: 50%;
    float: left;
    text-align: center;
  }
  .portfolio--inverted .port-col-left,
  .portfolio--inverted .port-col-right{
    float: right;
  }
}

有没有更好的方法将容器中的 2 列居中对齐？

Is there a more preferable way to center align 2 columns in a container?

css

center

alignment

flexbox