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

Question

因此，我们需要一种解决此对齐要求的方法：

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

Answer 1

解决方案是添加一个带有display: inline-block;的容器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 2

尝试使用如下所示的内容：

<div>
   <div id="center">
      <p>Center Align</p>
   </div>
   <div id="left">
      <p>Left Align</p>
   </div>
</div>

给#center，#left一定的宽度和边距：0自动; （因此保持居中）。

根据需要对齐它们

Answer 3

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

应该工作

Answer 4

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

此解决方案在您的标记中需要两个额外的元素，我不太喜欢但是可以满足您的要求。

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