我正在尝试在
例如,我正在尝试将该文本放在该行上方,以匹配该行下方的文本。
我不知道如何将底部文本与顶部文本对齐而没有左/右边距黑客。我该怎么做呢?
这是我的代码:
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;
}
答案 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/
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;
答案 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;
}