Question

我正在尝试使用display:flex将内容集中到div，但内部内容显示在列中，而不是居中，如何将内容垂直/水平居中并避免显示此列？< / p>

这是代码

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

只需删除width＆amp;来自float div的.gallery-1-main-info。查看下面的更新代码段...

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

这将使用Help on function a in module __main__: a(x, y) This is a docstring for functions: a, b, c Help on function b in module __main__: b(x, y) This is a docstring for functions: a, b, c Help on function c in module __main__: c(x, y) This is a docstring for functions: a, b, c

将文本居中

display: inline-block;

.gallery-1-main-info {
    width: 400px;
    float: left;
    background: #1f1f1f;
    font-size: 24px;
    color: #a5a5a5;
    min-height: 590px;
    display: flex;
    text-align: center;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

Answer 3

这似乎是您期望的结果，水平和垂直居中。我必须添加一个内容容器，否则<p>将覆盖所有可用空间。

＆＃13;

.gallery-1-main-info {
  min-height: 590px;
	background: #1f1f1f;
	font-size: 24px;
	color: #a5a5a5;
	display: flex;
  align-items: center;
  justify-content: center;
  flex-flow: row wrap;
}

.gallery-1-main-info .gallery-content {
	width: 400px;
  min-width: initial;
  flex: 0 0 100%;
  max-width: 400px;
  text-align: center;
}

＆＃13;

<div class="gallery-1-main-info">

  <div class="gallery-content">
    <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>
  
</div>

＆＃13;

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

3 个答案: