我正在尝试使用display:flex
将内容居中到div,但是内部内容显示在列中,而不是居中显示,如何垂直/水平居中显示内容并避免像显示那样显示此列?
这是代码
.gallery-1-main-info {
width: 400px;
float: left;
background: #1f1f1f;
font-size: 24px;
color: #a5a5a5;
min-height: 590px;
display: flex;
justify-content: center;
text-align: center;
align-items: center;
flex-direction: row;
}
<div class="gallery-1-main-info">
<p class="grid-eng-title">Ruksat Title</p>
<p class="grid-hin-title">Ruksat Title</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim </p>
</div>
最佳答案
只需从width
div中删除float
和.gallery-1-main-info
。检查以下更新的代码段...
.gallery-1-main-info {
background: #1f1f1f;
font-size: 24px;
color: #a5a5a5;
min-height: 590px;
display: flex;
justify-content: center;
text-align: center;
align-items: center;
flex-direction: column;
}
<div class="gallery-1-main-info">
<p class="grid-eng-title">Ruksat Title</p>
<p class="grid-hin-title">Ruksat Title</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim </p>
</div>