如何将此行与 flexbox 对齐？

【问题标题】：How do I align this row with flexbox?如何将此行与 flexbox 对齐？
【发布时间】：2018-09-24 10:08:48
【问题描述】：

我试图让图像与我的关于部分中的文本位于同一行。

我试图用 css flex-direction:row 将我的 <div class="portrait"> 和 <p> 包装成 <div class="wrapper">

Heres a pen:https://codepen.io/anon/pen/MqRdjb

我认为某些 CSS 被覆盖，或者我没有正确使用我的 CSS。

感谢大家的帮助！！

【问题讨论】：

和你的文本在同一行是什么意思？你能发布最少的可重现代码和一些表明你预期输出的东西吗？

标签： html css flexbox

【解决方案1】：

flex-direction: row 不包含display: flex 无效。

将包装器 css 调整为：

.wrapper {
  flex-direction: row;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
}

如果您想居中，您还可以重构包装器内元素的边距。任何垂直边距都可以删除并应用于包装器本身。

.portrait{
  width:100px;
  height:150px;
  margin-left: auto;
  margin-right: 10px; /* Align your image right */
  z-index: 1;
  border-radius: 10%;
  background-color:#555;
}

.ABOUT p{
  font-size:1.2em;
  text-align: center;
  margin-right: auto; /* align text left */
}

【讨论】：