CODEWITHSUNDEEP
htmlcss
javanumero
javanumero

Reputation: 125

How can I align text under a <hr> line properly?

I'm trying to properly align text under a

line.

For example, I'm trying to get the text above the line, to match up with the text below the line. enter image description here

I don't know how to align the bottom text to the top text without margin left / right hacks. How can I do this properly?

Here is my snippet:

p {
  display: inline-block;
}

.push {
  margin-right: 100px;
}

body {
  text-align: center;
}
<h1>Example 1</h1>
<p class="push">This is some text</p>
<p>This is text #2</p>
<hr>
<p>Not Aligned</p>
<p>Not Aligned</p>

<br><br>

<h1>Example 2</h1>
<p class="push">This is some text</p>
<p>This is text #2</p>
<hr>
<p class="push">"Aligned"</p>
<p>"Aligned"</p>
<br>
<p>These are not "aligned" properly, and don't match up perfectly.</p>

Upvotes: 1

Views: 365

Answers (4)

Tina
Tina

Reputation: 51

You can align them with display: flex and justify-content: space-around. For example:

<h1>Example 1</h1>
<div class="align">
  <p class="push">This is some text</p>
  <p>This is text #2</p>
</div>
<hr>
<div class="align">
  <p>Not Aligned</p>
  <p>Not Aligned</p>
</div>

And the css:

.align {
  display: flex;
  justify-content: space-around;
}

Upvotes: 0

Johannes
Johannes

Reputation: 67778

You can put wrappers (in the snippet: class .x) around those text pairs and use the following settings. Adjust the width setting in the second rule as needed to move them closer to or away from the center.

.x {
  text-align: center;
}

.x > * {
  display: inline-block;
  width: 200px;
}
<div class="x">
  <p class="push">This is some text</p>
  <p>This is text #2</p>
</div>
<hr>
<div class="x">
  <p>Now Aligned</p>
  <p>Now Aligned</p>
</div>

Upvotes: 3

webta.st.ic
webta.st.ic

Reputation: 5169

I tried it with flexbox: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

p {
  display: inline-block;
}

.push {
  margin-right: 100px;
}

body {
  text-align: center;
}

.parent-wrapper {
  width: 100%;
  display: flex;
  justify-content: center;
}

.wrapper {
  width: 350px;
  display: flex;
  justify-content: space-between;
}
<h1>Example 1</h1>
<div class="parent-wrapper">
  <div class="wrapper">
    <p class="push">This is some text</p>
    <p>This is text #2</p>
  </div>
</div>
<hr>
<div class="parent-wrapper">
  <div class="wrapper">
    <p>Not Aligned</p>
    <p>Not Aligned</p>
  </div>
</div>

Upvotes: 1

Mers
Mers

Reputation: 734

You can float the p element and set its width to 50%, like so:

p{
  float: left;
  width: 50%;
}

h1{
  clear: both;
}

body{
  text-align: center;
}
P:last-child
<h1>Example 1</h1>
<p class="push">This is some text</p><p>This is text #2</p>
<hr>
<p>Aligned</p>
<p>Aligned</p>

<br><br>

<h1>Example 2</h1>
<p class="push">This is some text</p><p>This is text #2</p>
<hr>
<p class="push">"Aligned"</p>
<p>"Aligned"</p>
<br>

Upvotes: 0

Related Questions