How to display multiple headers

I am trying to display multiple headers all on the same horizontal line. So far, I am able to display two of them, but the third keeps falling down a line. The following is an image of the what it currently looks like:

current display

The current code to display the headers:

  <header>
      <h1 class="text-sm display-3 font-weight-thin " style="text-align:center;float:left;" >Amazon</h1>
      <h1 class="text-sm display-3 font-weight-thin " style="text-align:center;float:center;">BestBuy</h1>
        <h1 class="text-sm display-3 font-weight-thin " style="text-align:right;float:right;">Target</h1> 
      <hr style="clear:all;"/> 
      </header>

2 answers

  • answered 2019-05-15 03:23 Snel23

    The trick to get Target onto the same line was to add display: inline-block; to the style of each <h1>. The trouble then became centering BestBuy, which was done by setting it to position: absolute; and centering it based on window size with left: 50%; transform: translateX(-50%);.

    Final working code:

    <header>
          <h1 class="text-sm display-3 font-weight-thin " style="text-align:left; display:inline-block" >Amazon</h1>
          <h1 class="text-sm display-3 font-weight-thin " style="position: absolute; text-align:center; left: 50%;transform: translateX(-50%); display:inline-block;">BestBuy</h1>
          <h1 class="text-sm display-3 font-weight-thin " style="text-align:right; float: right; display:inline-block">Target</h1> 
          <hr style="clear:all;"> 
    </header>
    

  • answered 2019-05-15 07:03 Mubin Shaikh

    By Using Float left and defining the width we can easily display the Headers without much complexity of code.

    <header>
          <h1 class="text-sm display-3 font-weight-thin " style=" width:30%; text-align:left; float:left;" >Amazon</h1>
          <h1 class="text-sm display-3 font-weight-thin " style=" width:40%; text-align:center; float:left;">BestBuy</h1>
          <h1 class="text-sm display-3 font-weight-thin " style="width:30%; text-align:right;float:left;">Target</h1> 
          <hr style="clear:all;"> 
    </header>