-2

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>
6
  • There's not much in this screenshot or HTML to go on. I'd suspect the display-3 class matters a lot here, but who knows?
    – ceejayoz
    May 15, 2019 at 2:57
  • Code in question produces a minimal example
    – Snel23
    May 15, 2019 at 2:59
  • Note that the <hr> tag does not use and does not need a closing slash and never has in HTML.
    – Rob
    May 15, 2019 at 3:05
  • The words: "Best Buy" are not aligned properly in your screenshot as well, maybe consider changing your font size?
    – Asension
    May 15, 2019 at 3:10
  • @B.Oss I tried reducing the font size, but Target still shows under the line. When I remove the Target h1 tag then BestBuy is alligned.
    – Bryan
    May 15, 2019 at 3:15

2 Answers 2

2

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>

0
0

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

Your Answer

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.