html - 使用 display flex 在列中显示的内部内容

Question

我正在尝试使用 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>

Answer 1

只需从 .gallery-1-main-info div 中删除 width 和 float。检查下面更新的代码段...

.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>