css - 如何使文本与 block 居中但左对齐？

Question

我希望它具有 css flex 属性(“图像内容” 文本中心与 block 对齐但左对齐)就像下图一样。

但我明白了

.wrapper {
  max-width:300px;
}
.main {
  width:300px;
  display:flex;
  justify-content:center;
  align-items:center;
  flex-flow:column nowrap;
  background:#458bc3;
  color:#fff;
  height:300px;
  overflow:hidden;
}
.content {
  color:#fff;
  background:#a6d8ff;
  height:100px;
  display:flex;
  justify-content:center;
  align-items:center;
  flex-flow:column nowrap;
}
.content p {
  margin:0px;
}

<div class="wrapper">
   <div class="main">
    IMAGE
  </div>
  <div class="content">
    <p>
       Image
    </p>
     <p>
       Content
     </p> 
   </div>
</div>

我需要(“图像内容” 文本与 block 居中对齐，但像图像一样向左对齐)。 任何人都可以帮助我如何使用 flex 获得这种方法？

Answer 1

只需使用 text-align: left 将您的内容 image 和 content para 包裹在 div 中。

试试这个:

查看演示 here

HTML:

<div class="wrapper">
  <div class="main">
    IMAGE
  </div>
  <div class="content">
    <div class="text-left">
      <p>
        Image
      </p>
      <p>
        Content
      </p>
    </div>

  </div>
</div>

CSS:

.wrapper {
  max-width:300px;
}
.text-left {
  text-align: left;
}
.main {
  width:300px;
  display:flex;
  justify-content:center;
  align-items:center;
  flex-flow:column nowrap;
  background:#458bc3;
  color:#fff;
  height:300px;
  overflow:hidden;
}
.content {
  color:#fff;
  background:#a6d8ff;
  height:100px;
  display:flex;
  justify-content:center;
  align-items:center;
  flex-flow:column nowrap;
}
.content p {
  margin:0px;
}