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

Question

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

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

居中的 dynamic 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>

Answer 1

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

应该可行

Answer 2

解决方案是添加一个容器 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>

Answer 3

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

Answer 4

此解决方案需要在您的标记中添加两个额外的元素，我不是很喜欢，但符合您的要求。

"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;
}

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

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

javascript

html

css

layout

text-alignment