Question

我正在尝试使图像与ABOUT部分中的文本位于同一行。

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

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

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

感谢所有帮助！

Answer 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 */
}

如何将这一行与flexbox对齐？

1 个答案: