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

时间:2018-04-25 15:13:31

标签: html css

我正在尝试在


行下正确对齐文字。

例如,我正在尝试将该文本放在该行上方,以匹配该行下方的文本。 enter image description here

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

这是我的代码:

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

4 个答案:

答案 0 :(得分:3)

您可以在这些文本对周围放置包装器(在代码段中: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>

答案 1 :(得分:1)

我尝试使用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;

答案 2 :(得分:0)

您可以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>

答案 3 :(得分:0)

您可以将它们与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;
}