Html 如何自定义对齐列中的内容，但保持文本左对齐？

我正在尝试对齐列中的文本内容。我不知道如何将整个内容对齐到列的中心或右侧，并使文本内容保持左对齐

我在JSFIDLE中添加了一个示例：

目前，立柱的形状如下所示：

|-----------------------------------------------|
|Lorem ipsum    |Lorem ipsum    |Lorem ipsum    |
|dolor sit      |dolor sit      |dolor sit      |
|amet           |amet           |amet           |
|consetetur     |consetetur     |consetetur     |
|sadipscing     |sadipscing     |sadipscing     |
|-----------------------------------------------|

|-----------------------------------------------|
|Lorem ipsum    |  Lorem ipsum  |    Lorem ipsum|
|dolor sit      |  dolor sit    |    dolor sit  |
|amet           |  amet         |    amet       |
|consetetur     |  consetetur   |    consetetur |
|sadipscing     |  sadipscing   |    sadipscing |
|-----------------------------------------------|

我期待着这样的事情：

|-----------------------------------------------|
|Lorem ipsum    |Lorem ipsum    |Lorem ipsum    |
|dolor sit      |dolor sit      |dolor sit      |
|amet           |amet           |amet           |
|consetetur     |consetetur     |consetetur     |
|sadipscing     |sadipscing     |sadipscing     |
|-----------------------------------------------|

|-----------------------------------------------|
|Lorem ipsum    |  Lorem ipsum  |    Lorem ipsum|
|dolor sit      |  dolor sit    |    dolor sit  |
|amet           |  amet         |    amet       |
|consetetur     |  consetetur   |    consetetur |
|sadipscing     |  sadipscing   |    sadipscing |
|-----------------------------------------------|

---

为此，您必须将

col

内容包装到元素中：

<div class="col">
  <div class="content">
     Lorem ipsum<br/>
      dolor sit<br/>
      amet<br/>
      consetetur<br/>
      sadipscing<br/>
  </div>
</div>

---

Fiddle:

首先，为div中的每一列添加文本，使其成为具有最宽文本行宽度的元素。然后，在父元素（col元素）上使用flexbox，并根据需要对齐div

HTML:

---

这是一个完整的解决方案：

使用

display:inline block

将内容添加到块中，使其适合大小，在该块中对齐，然后对齐块

请参见下面的内容（我不会内联使用，它是用来显示发生了什么）：

Lorem ipsum
dolor sit
amet

康塞图尔

sadipscing


Lorem ipsum
dolor sit
amet

康塞图尔

sadipscing


Lorem ipsum
dolor sit
amet

康塞图尔

sadipscing

添加到CSS

.text-center{
     text-align: left;
     padding-left: 1em;
}
.text-right{

}

<div class="container">
    <div class="row">
        <div class="col">
            <div style="display: inline-block; text-align: left">
                Lorem ipsum<br/> dolor sit<br/> amet
                <br/> consetetur
                <br/> sadipscing
                <br/>
            </div>
        </div>
        <div class="col text-center">
             <div style="display: inline-block; text-align: left">
                Lorem ipsum<br/> dolor sit<br/> amet
                <br/> consetetur
                <br/> sadipscing
                <br/>
            </div>
        </div>
        <div class="col text-right">
             <div style="display: inline-block; text-align: left">
                Lorem ipsum<br/> dolor sit<br/> amet
                <br/> consetetur
                <br/> sadipscing
                <br/>
            </div>
        </div>
    </div>
</div>

.text-center{
     text-align: left;
     padding-left: 1em;
}
.text-right{

}