css 如何将第一个p标记放在它下面的第二个p标记的中间

lmyy7pcs  于 2023-01-14  发布在  其他
关注(0)|答案(4)|浏览(237)

我需要将屏幕右侧的两个p标签列对齐,如下面的代码所示:

.divsignature{
  font-weight: bold;
  float:right;
  }

.signature{
  padding: 15px 30px 10px 0px;
}
<div class="divsignature">
  <p class="signaturetext">Signature for acceptance</p>
  <p class="signature">__________________________________</p>
</div>

但是我希望"Signature for acceptance"的字样相对于下面一行位于中间,即相对于带有类签名的p标记。
有谁能帮帮我吗?

lymnna71

lymnna711#

用这个;

.divsignature{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    font-weight: bold;
    float: right;
}

/* Remove the .signature padding */

.divsignature {
    text-align: center;
    font-weight: bold;
}

.signaturetext {
    text-align: center;
}

/* Remove the .signature padding */

哪个对你最合适。

jecbmhm3

jecbmhm32#

你可以修改容器(主体)并使用flex。我从px修改而来,所以如果你缩放空间的话,可以使用flex。

/* use whatever the container is for divsignature instead of body here */
body {
  display: flex;
  justify-content: end;
}

.divsignature {
  font-weight: bold;
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* center the label above the line */
  text-align: center;
}

.signature {
  padding-top: 1em 2em 0.625em 0;
}
<div class="divsignature">
  <p class="signaturetext">Signature for acceptance</p>
  <p class="signature">__________________________________</p>
</div>

这里是一个潜在的替代使用网格,没有文字的行只是一个边界;空间可以改变字体大小等。在CSS中的相关有趣的事情的评论。
一个二个一个一个

beq87vna

beq87vna3#

使用text-align: center;可以将其存档。

.divsignature {
  margin-left: auto; 
  margin-right: 0;
  width:40%;
}

.signature {}

.signaturetext {
  text-align:center;
}
<div class="divsignature">
  <p class="signaturetext">Signature for acceptance</p>
  <p class="signature">__________________________________</p>
</div>
xkrw2x1b

xkrw2x1b4#

    • 问题:**没有样式可以使文本在css中居中,所以我们需要添加它。
    • 解决方案:**您需要添加样式以使文本居中,这可以通过使用text-align:center来实现。
.divsignature{
  font-weight: bold;
  float:right;
  }

.signaturetext{
  text-align:center;
}
<div class="divsignature">
  <p class="signaturetext">Signature for acceptance</p>
  <p class="signature">__________________________________</p>
</div>

相关问题