如何在<h1>同一个div中将a与中心对齐，将a与<p>右对齐

Question

我正在使用bootstrap 4来想出一个div，其中包含一个与中心对齐的<h1>，而一个向右对齐的<p>标签。这正是我想要实现的目标：https://i.stack.imgur.com/dhgqX.jpg

我更喜欢使用引导 4 类或弹性框的方法，而不是使用任何浮点数。这是我到目前为止编写的代码：

<div class="row">
    <div class="col-sm-12 p-20">
        <h1 class="heading-font px36-font d-inline-block">.Hay<span class="skyblue">ford</span></h1>
        <p class="d-inline-block special-font b-900"><i class="fa fa-phone"></i> [phone]</p>
    </div>
</div>

Answer 1

h1 {
  text-align: center;
}
p {
  text-align: right;
}

<div class="row">
  <div class="col-sm-12 p-20">
    <h1 class="heading-font px36-font d-inline-block">.Hay<span class="skyblue">ford</span></h1>
    <p class="d-inline-block special-font b-900"><i class="fa fa-phone"></i> [phone]</p>
  </div>
</div>

Answer 2

只需将

主div 分成 2 个子div

<div class="row">
            <div class="col-sm-12 p-20">
                <div style="width: 80%; float:left">
                <center><h1 class="heading-font px36-font d-inline-block">.Hay<span class="skyblue">ford</span></h1></center>
                </div>
                <div style="width: 20%; float:right">
                <p class="d-inline-block special-font b-900"><i class="fa fa-phone"></i> [phone]</p></div>
            </div>
        </div>

Answer 3

对于 h1，您可以添加一个名为"text-center"的类。对于父div "p-20"，使其成为相对的。现在将 p 标签定位为绝对标签，并使用 right： 5px;， top： 5px; 进行控制。

希望这有效，如果它得到充分帮助，请投票。

谢谢。。！！