Question

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

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

你怎么能实现像这样用CSS？

这是一个JSFiddle入门

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

Answer 2

请尝试使用Bootstrap CSS，它对我的帮助很简单。

<div class="col">
<p class="text-center">Title</p>
<p class="text-left">Test content Content</p>


</div>

检查小提琴https://jsfiddle.net/0h2nmj3r/

Answer 3

*查看其他答案以获取对齐文本的方向，这是答案，有助于获得该列效果

获得这样三列的最好方法是在CSS中使用一种特殊的显示方式，称为“ flex”。 Flex使您可以轻松地在父html元素内对齐元素。

.container{
  display:flex;
  flex-direction : row;
  justify-content: space-around;

}

.text-box{
  display: flex;
  flex-direction:column;
  align-items:flex-start;
  width:20%;
}

p{
  margin: 0 0 5px 0;
}

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

因此，如您所见，我已将flex应用于容器和文本框。可以像在其他答案中一样使用左对齐，但我选择了align-items：flex-start，因此文本框中的任何元素都将向左对齐。

通过设置justify-content：space-around，它使容器中的每个元素在其周围具有相等的空间，因此，如果您要更改窗口大小，则空间将是相对的并发生变化。我建议您学习更多有关flex和grid的知识，以提高您的CSS技能。

下面的中心对齐文本左对齐文本

3 个答案: