Stack two paragraphs vertically, one centered and one to the right on the same line

Question

Stack two paragraphs vertically, one centered and one to the right on the same line

According to the experts at W3Schools

The align attribute is no longer supported in HTML5. Using CSS is the recommended approach.

I am puzzled by how I can align two paragraphs on the same line.

I am open to using flexbox for this task, but I want to avoid adding unnecessary dummy elements or complicating it with rows and columns.

This is my current attempt, where the text-align property doesn't seem to have an effect:

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>

css html text-alignment

Answer 1

Answer №1

To achieve this layout, you can utilize the power of Flexbox along with the position property:

.centered {
  position: relative; /* parent container needs a position */
  display: flex; /* arranges child elements in a row */
  justify-content: center; /* centers items horizontally */
  align-items: center; /* centers items vertically */
}

.centered > .right {
  position: absolute; /* child element is positioned absolutely */
  right: 0;
}

@media (max-width: 480px) { /* responsive design adjustment */
  .centered {
    flex-direction: column; /* stacks child elements vertically on smaller screens */
  }
  .centered > .right {
    position: static; /* revert to default positioning */
    align-self: flex-end; /* aligns child element to the horizontal end */
  }
}

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

Answer 2

To achieve this layout, you can utilize the power of Flexbox along with the position property:

.centered {
  position: relative; /* parent container needs a position */
  display: flex; /* arranges child elements in a row */
  justify-content: center; /* centers items horizontally */
  align-items: center; /* centers items vertically */
}

.centered > .right {
  position: absolute; /* child element is positioned absolutely */
  right: 0;
}

@media (max-width: 480px) { /* responsive design adjustment */
  .centered {
    flex-direction: column; /* stacks child elements vertically on smaller screens */
  }
  .centered > .right {
    position: static; /* revert to default positioning */
    align-self: flex-end; /* aligns child element to the horizontal end */
  }
}

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

Answer 3

Answer №2

h1 {
   display: block;
}

.middle {
  margin-left:50%;

}

.left-align {
  float: left;
}

Answer 4

h1 {
   display: block;
}

.middle {
  margin-left:50%;

}

.left-align {
  float: left;
}

Answer 5

Answer №3

If you're looking to achieve a specific layout, consider incorporating percentage width for your paragraphs and applying float:right; to both of them. Remember the order in which you place the .right paragraph above the .center paragraph in your HTML code.

Check out the snippet below for guidance.

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>

I hope this provides some assistance.

Answer 6

If you're looking to achieve a specific layout, consider incorporating percentage width for your paragraphs and applying float:right; to both of them. Remember the order in which you place the .right paragraph above the .center paragraph in your HTML code.

Check out the snippet below for guidance.

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>

I hope this provides some assistance.

Answer 7

Answer №4

Given the brief description provided, there isn't much to respond with.

Here's how I would approach it:

If I were to use flex:

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

If I were to utilize table-layout (compatible with IE8 and above):

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

p {
  display: table-cell;
}

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

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

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

If I decided to go with grid:

.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 wouldn't resort to using float or inline-block where elements may wrap onto the next line unexpectedly (unless max-width is specified for both elements) ;)

Answer 8

Given the brief description provided, there isn't much to respond with.

Here's how I would approach it:

If I were to use flex:

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

If I were to utilize table-layout (compatible with IE8 and above):

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

p {
  display: table-cell;
}

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

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

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

If I decided to go with grid:

.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 wouldn't resort to using float or inline-block where elements may wrap onto the next line unexpectedly (unless max-width is specified for both elements) ;)

Answer 9

Answer №5

Here is a straightforward solution:

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

.center {
  display: inline-block;
}

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

By using position: absolute on the .right class, you have the ability to reposition the paragraph within its nearest parent element that has position: relative set (if no parent elements have this property, it will relate to the window).

The reason why text-align does not work in this case is due to the display: inline-block setting.

Here are some fundamental concepts to consider:

A paragraph element acts as a container, with the text inside considered another element itself.
text-align aligns the content within an element, so the text aligns itself to the borders of the paragraph element.
The default behavior for a paragraph element is display: block, which means it takes up the full width of its parent element (or the window if not nested). As a result, text-align has a clear impact.
When display: inline-block is used, the element's borders shrink to fit the content size. Since text-align affects the content and not the element directly, the paragraph element remains stationary.

Answer 10

Here is a straightforward solution:

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

.center {
  display: inline-block;
}

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

By using position: absolute on the .right class, you have the ability to reposition the paragraph within its nearest parent element that has position: relative set (if no parent elements have this property, it will relate to the window).

The reason why text-align does not work in this case is due to the display: inline-block setting.

Here are some fundamental concepts to consider:

A paragraph element acts as a container, with the text inside considered another element itself.
text-align aligns the content within an element, so the text aligns itself to the borders of the paragraph element.
The default behavior for a paragraph element is display: block, which means it takes up the full width of its parent element (or the window if not nested). As a result, text-align has a clear impact.
When display: inline-block is used, the element's borders shrink to fit the content size. Since text-align affects the content and not the element directly, the paragraph element remains stationary.

Answer 11

Answer №6

.box {
  display:flex;
}

span {
  display: block;
}

.centered {
  text-align: center;
}

.right-aligned {
  text-align: right;
}

.left-aligned {
  text-align: left;
}

<div class="box">
  <span class="centered">Centered</span>
  <br>
  <span class="right-aligned">Right Aligned</span>
  <br>
  <span class="left-aligned">Left Aligned</span>
</div>

Answer 12

.box {
  display:flex;
}

span {
  display: block;
}

.centered {
  text-align: center;
}

.right-aligned {
  text-align: right;
}

.left-aligned {
  text-align: left;
}

<div class="box">
  <span class="centered">Centered</span>
  <br>
  <span class="right-aligned">Right Aligned</span>
  <br>
  <span class="left-aligned">Left Aligned</span>
</div>

Stack two paragraphs vertically, one centered and one to the right on the same line

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Answer №6

Similar questions

Struggling to display the sorted array items on the screen?

Enhancing JQuery UI Accordion with simple ICONS

Is there a way to ensure a grid container occupies the entire page?

PHP Arrays and HTML Form Select Elements

Enhancing User Experience with Interactive React Hover Effects

Is there a way for me to direct to a different HTML page once I click on a certain data point?

What could be causing my website icon to not appear?

Transforming HTML output into JSON format on Firefox

Exporting Datatables to excel does not remove HTML tags as expected

Creating a Custom Checkbox with HTML and Label

Design a floating text box similar to Gmail's style by incorporating Google's Material Design Lite

Safari is struggling with the backface visibility feature not functioning as expected

Select a specific division element using a pseudo element

Display the URL created in the DIV

The appearance of random instances of the letter "L" within text on Internet Explorer 8

Is there a way to ensure that my JavaScript code remains permanent?

Tips for incorporating fading text and a CTA into your content block

Is there a method to transform the lower portion of a background image into a uniform white color?

Inserting information into a SQL database using PHP

Customizing event colors in Full Calendar