How do I get HTML text-align center and right on the same line (without using float)

Question

Right now I have

<p style="text-align: center">Hello world</p>
<p style="text-align: right">Hello world</p>

which gives me

                     Hello world
                                             Hello world

I'd like them to be on the same line. I've tried using float such as

<div style="float: left">This is on the left </div><div style="float: right">This is on the right</div>

But they both end up on the left on top of each other

This is on the left
This is on the right

Is there a way to get them aligned where I want on the same line?

Alex Quintero · Answer 1 · 2020-08-21T01:03:43.647

2

@dgknca you can use flex

.container {
  display: flex; 
  justify-content: flex-end;
}
.item-center {
  margin: auto;
}

<div class="container">
  <div class="item-center">Item center</div>
  <div>Item right</div>
</div>

edited Aug 21 '20 at 01:03

answered Aug 20 '20 at 21:35

Alex Quintero

1,160
10
21

The question asks for the text to be centered and right justified. – Sean Aug 20 '20 at 21:54
okay. I update my answer @Damien Scott – Alex Quintero Aug 21 '20 at 00:12

score 1 · Answer 2 · answered Aug 20 '20 at 21:57

1

You can use CSS Grid to divide a parent element evenly into columns and then flow content into each grid cell.

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}
.center {
  text-align: center;
}
.right {
  text-align: right;
}

<div class='grid'>
  <p class='left'>This is on the left </p>
  <p class='center'>This is in the center</p>
  <p class='right'>This is on the right</p>
</div>

answered Aug 20 '20 at 21:57

Sean

6,873
4
21
46

Unfortunately, they're all on seperate lines for me – Damien Scott Aug 20 '20 at 22:53
Are you using an old browser or older OS? @DamienScott – Sean Aug 21 '20 at 01:09

score 0 · Answer 3 · answered Aug 20 '20 at 22:21

Following your first example, you have "center" and "right" so I'm inferring from that what you want, the rest of OP isn't quite clear to me.

The tricky part is actually having one be perfectly center, and one be on the right, and nothing on the left. Usually for stuff like this I'd use flexbox and put an extra container on the left to get the centering to work.

Here it is - just have your container be flex. Then set items to grow using 0 as basis (this is important so content width does not shift the centering and you get 3 equal width containers regardless of content). Then just wrap the one you want on the right in another div and justify-content: flex-end to get it on the right.

That's the best I know off the top - maybe some better ways...

body { display: flex; }

body div { display: flex; flex: 1 1 0 }

body .f-right { justify-content: flex-end }


/* center line/decoration */
.center-line {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  height: 100%;
  width: 1px;
  background: blue;
  opacity: .3
}

body { margin: 0 }

<div></div>

<p>Hai from center</p>

<div class="f-right">
  <p>Hai from right</p>
</div>

<!-- just showing center -->
<div class="center-line"></div>

score -1 · Answer 4 · answered Aug 20 '20 at 21:42

For this to work you have to put them both in the same p element. Using two separate p elements will cause them to be on different lines. The example code you gave works because both the left and right side are in the same block element. Separating them into two block elements will cause them to stack on each other.

How do I get HTML text-align center and right on the same line (without using float)

4 Answers4