CODEWITHSUNDEEP
javascripthtmlcsslayouttext-alignment
malisokan
malisokan

Reputation: 5467

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

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>

Upvotes: 2

Views: 1678

Answers (4)

hungerstar
hungerstar

Reputation: 21675

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

Upvotes: 0

Alist3r
Alist3r

Reputation: 556

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

Upvotes: 0

VisioN
VisioN

Reputation: 145368

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>

Upvotes: 3

Chris Chong
Chris Chong

Reputation: 187

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

that should work

Upvotes: 0

Related Questions