如何將文字與居中文字的左側對齊？

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