Vertically align two paragraphs on one line, one in center one on right

Question

according to W3Schools

The align attribute is not supported in HTML5. Use CSS instead.

I am wondering how on earth, can I simply align two paragraphs within one line.

I am open to flex box solutions, but, I do not need a third dummy paragraph to behave as a starting point. Also, producing a row and columns seems to overcomplicating this ?simple? task?

This is what I have come up with so far, thus text-align does nothing...:

p {
  display: inline-block;
}

.center {
  text-align: center;
}

.right {
  text-align: right;
}

<div class="container">
  <p class="center">Center</p>
  <p class="right">Right</p>
</div>

possible duplicate: https://stackoverflow.com/q/38948102/3597276 — Michael Benjamin, Oct 29 '17 at 18:47

score 0 · Answer 1 · answered Oct 29 '17 at 18:45

0

p {
   display: inline-block;
}

.center {
  margin-left:50%;

}

.right {
  float: right;
}

answered Oct 29 '17 at 18:45

Osama

2,912
1
12
15

score 0 · Answer 2 · answered Oct 29 '17 at 18:50

If I understood your question. You should add some percentage width to your two paragraphs and then add float:right; to both of them. Also, don't forget to keep the .right paragraph above the .center paragraph in your html.

See the below snippet for reference.

p {
  display: inline-block;
}

.center {
  text-align: center;
  width: 33.3333%;
  float: right;
}

.right {
  text-align: right;
  width: 33.33333%;
  float: right;
}

<div class="container">
  <p class="right">Right</p>
  <p class="center">Center</p>
  
</div>

Hope this help.

G-Cyrillus · Answer 3 · 2017-10-29T19:10:13.227

With the litlle description you gave, there is little to answer.

to start:

With flex I would do :

.container {
display:flex;
}
.center {
  flex:1;
  text-align: center;
}

.right {
  text-align: right;
}

<div class="container">
  <p class="center">Center</p>
  <p class="right">Right</p>
</div>

With the table-layout (IE8 & +) , I would do

.container {
  display: table;
  width: 100%;
}

p {
  display: table-cell;
}

.center {
  text-align: center;/* will use whole space avalaible*/
}

.right {
  text-align: right;
  width: 5em;/* a small value to shrink it on its content */
}

<div class="container">
  <p class="center">Center</p>
  <p class="right">Right</p>
</div>

with grid, I would do

.container {
  display:grid;
  grid-template-columns:1fr auto;
}


.center {
  text-align: center;
}

.right {
  text-align: right;
}

<div class="container">
  <p class="center">Center</p>
  <p class="right">Right</p>
</div

I would not use float nor inline-block where elements can wrap to the next line any time (unless max-width is set for both elements) ;)

barbarossa · Answer 4 · 2017-10-30T08:43:11.373

One simple solution:

.container {
  position: relative;
  text-align: center;
}

.center {
  display: inline-block;
}

.right {
  display: inline-block;
  position: absolute;
  top: 0;
  right: 0;
}

With position: absolute applied on .right, you can move the paragraph wherever you want within the next parent element that has position: relative (If no parent has position set, the element will relate to the window).

The reason why text-align is not working in your case, is because of display: inline-block.

Some basics you need to know:

A paragraph element is just a form of a container. The text in it is basically another element itself.
text-align aligns the content within an element. Hence, the text gets aligned to the borders of the paragraph element.
The default value for a paragraph element is display: block. That means its width spans over the entire width of its parent element (or the window in case no container is declared). Hence, text-align will have a visible effect.
display: inline-block will make the borders of the element it is applied on shrink to the size of its content. Since text-align affects the content, not the element itself, your paragraph element won't move.

Thanks for the explanation, but that actually drops .right to the next line, and I wanted to have two paragraphs on one line. — , Oct 30 '17 at 08:02
True, somehow it appeared on the same line when I tried the code. However, in that case you can set .center and .right to display: inline-block and it will work perfectly fine. — barbarossa, Oct 30 '17 at 08:41

VXp · Accepted Answer · 2018-09-16T16:31:43.873

You can do it with the Flexbox and position property:

.container {
  position: relative; /* needs to be on the parent */
  display: flex; /* displays flex-items (children) inline */
  justify-content: center; /* centers them horizontally */
  align-items: center; /* and vertically */
}

.container > .right {
  position: absolute; /* needs to be on the child */
  right: 0;
}

@media (max-width: 480px) { /* adjust */
  .container {
    flex-direction: column; /* stacks flex-items vertically */
  }
  .container > .right {
    position: static; /* back to default */
    align-self: flex-end; /* aligns to the horizontal end */
  }
}

<div class="container">
  <p class="center">Center</p>
  <p class="right">Right</p>
</div>

score 0 · Answer 6 · answered Oct 30 '17 at 10:17

.container {
  display:grid;
}

p {
  display: inline-block;
}

.center {
  text-align: center;
}

.right {
  text-align: right;
}

.left {
  text-align: left;
}

<div class="container">
  <p class="center">Center</p>
  <br>
  <p class="right">Right</p>
  <br>
  <p class="left">Left</p>
</div>

Vertically align two paragraphs on one line, one in center one on right

6 Answers6