html - 居中对齐文本下方左对齐文本

Question

我想知道是否可以在居中对齐文本下方左对齐文本，以便两个文本从相同位置开始。

在示例图中。标题居中对齐，下面的副本左对齐。

如何使用 CSS 实现这样的功能？

这是一个 JSFiddle 开始

https://jsfiddle.net/j5p7v8m9/

<div>
  <p style="text-align: center;">TITLE</p>
  <p style="text-align: left;">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
  </p>
</div>

Answer 1

答案在这里。我已经更新了你的 JSFiddle。您需要为每个 div 添加一些包装器，然后您可以将标题居中，如下所示:

HTML:

<div class="container">
  <div class="col">
    <div class="contents">
      <p class="title">TITLE</p>
      <p class="text">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
      </p>
    </div>    
  </div>
  <div class="col">
    <div class="contents">
      <p class="title">TITLE</p>
      <p class="text">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
      </p>
    </div>
  </div>
  <div class="col">
    <div class="contents">
      <p class="title">TITLE</p>
      <p class="text">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
      </p>
    </div>
  </div>
</div>

CSS:

.container{
  display: block;
}
.col{
  float: left;
  width: 33.33%;
}
.contents{
  margin-left: 20px;
  margin-right: 20px;
}
.title{
  text-align: center;
}

JSFiddle:https://jsfiddle.net/53oLpvqg/