有没有更可取的方法来居中对齐容器中的 2 列？ [关闭]

Posted 2023-03-29

【中文标题】有没有更可取的方法来居中对齐容器中的 2 列？ [关闭]

【英文标题】：Is there a more preferable way to center align 2 columns in a container? [closed]

【发布时间】：2016-12-16 18:46:35

【问题描述】：

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

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

See above link for code.

【问题讨论】：

这个问题要么过于宽泛，要么基于观点，要么需要讨论，因此与 Stack Overflow 无关。如果您有具体的、可回答的编程问题，请提供完整的详细信息。

问题必须包含最短的代码在问题本身中。 注意 - 请不要滥用代码块来绕过此要求。

【参考方案1】：

我想说的是，您实际上不必使用 flexbox 来实现这一点，它非常简单。 Here's 一个简单的使用 float 和 media query 的 codepen 工作示例。我假设您希望获得与您提供的网站相同的结果，在移动设备上，两列相互堆叠，图像始终是第一个；避免使用 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;