Question

我需要垂直和水平对齐div元素。我使用flex显示，但现在元素显示在一行，即使存在<br>。如何将段落和图像元素分成两行？

.container {
  width: 100%;
  height: 100%;
}

.center {
  display: flex;
  justify-content: center;
  align-items: center;
}

<div class="container">
  <div style="width:100%; height:100%; color:#fff; background-color:black;" class="center">
    <p>SOME TEXT</p>
    <br>
    <img style="max-height:100%; max-width:100%;" src="http://www.jacobsladderky.com/uploads/6/9/1/4/69146851/4652558.png" alt="">
  </div>
</div>

提前致谢。

Answer 1

<div style="width: 100%;height: 100%;color: #fff;background-color: black;text-align:  center;" class="center" data-mce-style="width: 100%; height: 100%; color: #fff; background-color: black;"><p>SOME TEXT</p><br> <img style="max-height: 100%; max-width: 100%;" src="http://www.jacobsladderky.com/uploads/6/9/1/4/69146851/4652558.png" data-mce-src="http://www.jacobsladderky.com/uploads/6/9/1/4/69146851/4652558.png" data-mce-style="max-height: 100%; max-width: 100%;"></div>

只是改变这个DIV

Answer 2

您可以使用flex-direction: column;属性将元素对齐在1中列，请参阅此flexbox documentation。

.container {
  width: 100%;
  height: 100%;
}

.center {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

<div class="container">
  <div style="width:100%; height:100%; color:#fff; background-color:black;" class="center">
    <p>SOME TEXT</p>
    <img style="max-height:100%; max-width:100%;" src="http://www.jacobsladderky.com/uploads/6/9/1/4/69146851/4652558.png" alt="">
  </div>
</div>

如何在居中的flexbox div容器中打破一行？

2 个答案: