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

Question

So we want a solution to this alignment requirement:

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

The centered, dynamic BlaBla text lives with the OtherText in a responsive width container. The OtherText should be aligned left, but (and that is the root problem) still in an alignment with the left side of the centered text.

So with simple CSS I can only achieve this:

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

Who knows a super awesome CSS or JavaScript solution?

 .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

The solution would be to add a container with 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

Try and use something like this:

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

give #center, #left a certain width and margin: 0 auto; (so it stays centered).

align them as you like

Answer 3

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

that should work

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

This solution requires two extra elements in your markup which I'm not a big fan of but meets your requirements.

The "Bla" text needs to govern the width of "OtherText" . By placing both text blocks in an inline-block element, that containing element will only be as wide as the largest child, which in this instance is the "Bla" text. The second container is used to center the first containing element.

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