如何正确对齐<hr />行下的文本？

Question

我正在尝试在

---

行下正确对齐文字。

例如，我正在尝试将该文本放在该行上方，以匹配该行下方的文本。

我不知道如何将底部文本与顶部文本对齐而没有左/右边距黑客。我该怎么做呢？

这是我的代码：

public function actionCreatePdf() {
    Yii::$app->setComponents([
        'response' => DumbResponse::class
    ]);

    $pdf = new FPDF();
    // ...
    $pdf->Output('D', 'my.pdf');
}

p {
  display: inline-block;
}

.push {
  margin-right: 100px;
}

body {
  text-align: center;
}

Answer 1

您可以在这些文本对周围放置包装器（在代码段中：class .x）并使用以下设置。根据需要调整第二个规则中的宽度设置，使它们更接近或远离中心。

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

Answer 2

我尝试使用flexbox：https://css-tricks.com/snippets/css/a-guide-to-flexbox/

＆＃13;

＆＃13;

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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 3

您可以float p元素并将其宽度设置为50％，如下所示：

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>

Answer 4

您可以将它们与display：flex和justify-content：space-around对齐。例如：

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

和css：

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