如何使文本对齐中心与块但对齐左？

Question

我希望使用css flex property（＆＃34;图像内容＆＃34; 文本中心与块对齐但左对齐），就像下图一样。

但我得到了这个

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

我需要（＆＃34;图像内容＆＃34; 文本对齐中心与块，但左对齐像图像）。 任何人都可以帮助我如何通过flex获得这种方法？

Answer 1

align-items:center;保持flex的子元素与center对齐。将值更改为left将最左对齐。同样，您必须调整<p>元素以获得所需的输出。我希望margin-left有一些%值，如下所示：

.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:left;
  flex-flow:column nowrap;
}
.content p {
  margin-left: 40%;
}

Answer 2

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

试试这个：

检查演示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;
}