引导/CSS:使文本对齐左中心

Question

我需要你的帮助。我有一个专栏，里面有一些文字。这必须在中间，但对齐如下所示。我试着添加一个

display: inline-block; text-align: left

但不起作用。

我应该如下所示：

​

                              Other Lorem Stuff
                          > Lorem ipsum dolor sit amet
                          > Consectetur adipiscing elit
                          > Aenean laoreet lectus nec risus 
                            malesuada auctor.
                          > Vestibulum pellentesque, ante sit 
                            amet congue tempus

​

请注意，当这些文字回溯时，它们在文字下面而不是在>符号下面。

这是代码：

​

.footsmall{
    background-color: #FFF8DC;
    top:-50px;
    right: 100px;
    height: 300px;
    display: inline-block; 
    text-align: left
}

<div class="col-3 position-absolute footsmall text-center p-3">
                <p class="fs-4">Other Lorem Stuff</p>
                <p> > <u>Lorem ipsum dolor sit amet</u></p>
                <p> > <u>Consectetur adipiscing elit</u></p>
                <p> > <u>Aenean laoreet lectus nec risus malesuada auctor.</u></p>
                <p> > <u>Vestibulum pellentesque, ante sit amet congue tempus</u></p>
            </div>

​

有人能帮我吗？

Answer 1

您可以为每个项目使用一个柔性箱容器。

  <div class="d-flex">
    <span>&gt;</span>
    <p class="text-decoration-underline">Lorem ipsum dolor sit amet</p>
  </div>

请参阅下面的工作片段：

​

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

<div class="container">

  <div class="row">
    <div class="col-3 p-3 text-center">
      <p class="fs-4">Other Lorem Stuff</p>
      <div class="d-flex">
        <span>&gt;</span>
        <p class="text-decoration-underline">Lorem ipsum dolor sit amet</p>
      </div>
      <div class="d-flex">
        <span>&gt;</span>
        <p class="text-decoration-underline">Consectetur adipiscing elit</p>
      </div>
      <div class="d-flex">
        <span>&gt;</span>
        <p class="text-decoration-underline">Aenean laoreet lectus nec risus malesuada auctor.</p>
      </div>
      <div class="d-flex">
        <span>&gt;</span>
        <p class="text-decoration-underline">Vestibulum pellentesque, ante sit amet congue tempus.</p>
      </div>
    </div>
  </div>

</div>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>

​

Answer 2

需要注意的是，与其在CSS中使用显示和文本对齐，不如直接将类添加到元素中：

​

<div class="d-inline-block text-start"> </div>

​

您可以使用无序列表代替段落，并将标记样式更改为您想要的雪佛龙。

​

.custom-li {
    list-style-type: '> ';
}

        <div class="col-3 footsmall text-center">
            <p class="fs-4 p-3">Other Lorem Stuff</p>
            <ul class="text-start custom-li">
                <li>
                    <u>Lorem ipsum dolor sit amet</u>
                </li>
                <li>
                    <u>Consectetur adipiscing elit</u>
                </li>
                <li>
                    <u>Aenean laoreet lectus nec risus malesuada auctor.
                </li>
                <li>
                    <u>Vestibulum pellentesque, ante sit amet congue tempus</u>
                </li>
            </ul>
        </div>

​

这就是你想要的吗？让文字不落在你的线标记之下？