我需要垂直和水平对齐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>
提前致谢。
答案 0 :(得分:0)
<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
答案 1 :(得分:0)
您可以使用
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>