如何将文本与居中文本的左侧对齐

How to align text to the left side of centered text?

本文关键字：文本 对齐 中文      更新时间：2023-09-26

所以我们想要一个解决这个对齐要求的解决方案：

---------------------------
|         BlaBla          |
|    Bla BlaBla BlaBla    |
|        BlaBla Bl        |
---------------------------
|    OtherText            |
---------------------------

居中的动态BlaBla 文本与 OtherText 一起存在于响应式宽度容器中。OtherText 应该左对齐，但(这是根本问题(仍然与居中文本的左侧对齐。

所以使用简单的CSS我只能实现这一点：

---------------------------
|         BlaBla          |
|    Bla BlaBla BlaBla    |
|        BlaBla Bl        |
---------------------------
|OtherText                |
---------------------------

谁知道一个超级棒的CSS或JavaScript解决方案？

.slider {
  width: 100%;
}
.slider .title {
  width: 80%;
  text-align: center;
}
.slider .btn {
  text-align: left;
}
<div class="slider">
  <h1 class="title">BlaBla<br>Bla BlaBla BlaBla<br>BlaBla Bl</h1>
  <span class="btn">OtherText</span>
</div>

解决方案是添加一个容器，其中包含display: inline-block;：

.slider {
  width: 100%;
  text-align: center;
  border: 1px dotted;
}
.slider .container {
  display: inline-block;
  border: 1px dotted;
}
.slider .btn {
  text-align: left;
}
<div class="slider">
  <div class="container">
    <h1 class="title">BlaBla<br>Bla BlaBla BlaBla<br>BlaBla Bl</h1>
    <div class="btn">OtherText</div>
  </div>
</div>

.slider .btn {
    text-align: left;
    width: 80%;
    margin: 0 auto;
    display: block;
}

那应该有效

    <table>
       <tr>
           <td class="title"> <h1>BlaBla<br>Bla BlaBla BlaBla<br>BlaBla Bl </h1>   </td>
      </tr>   
      <tr>
          <td class="btn">  hola  </td>
      </tr>
    </table>

    table .title {
      text-align: center;
    }
    table .btn {
      text-align: left;
    }
    table {
      margin:0 auto;  
    }
    table td {
      border: 1px solid red; 
      padding: 0px;
    }

https://jsfiddle.net/k5kagxju/

此解决方案需要您的标记中有两个额外的元素，我不是它的忠实粉丝，但可以满足您的要求。

"Bla"文本需要控制"OtherText">的宽度。通过将两个文本块放在一个inline-block元素中，该包含元素的宽度将仅与最大的子元素一样宽，在本例中为"Bla">文本。第二个容器用于使第一个包含元素居中。

<div class="container">
    <div class="alignment">
        <p>
            Bla Bla<br>
            Bla Bla Bla Bla Bla<br>
            Bla Bla Bla
        </p>
        <p>
            OtherText
        </p>
    </div>
</div>

.container,
.alignment {
    text-align: center;
}
.alignment {
    display: inline-block;
}
.container p:nth-of-type(2) {
    text-align: left;
}
相关文章：