Question

我正在使用bootstrap 4来提出一个div，其中包含一个<h1>与中心对齐，而<p>标签与右边对齐。这正是我想要实现的目标： http://imgur.com/a/8u5MD

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

<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> +92-336-54-14-994</p>
    </div>
</div>

Answer 1

＆＃13;

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

＆＃13;

<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> +92-336-54-14-994</p>
  </div>
</div>

＆＃13;

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> +92-336-54-14-994</p></div>
            </div>
        </div>

Answer 3

对于h1，您可以添加一个名为＆＃34; text-center＆＃34;的类。对于父母div＆＃34; p-20＆＃34;使它相对。现在，将p标签置于绝对位置并使用右侧控制：5px;，top：5px;。

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

谢谢.. !!

如何将<h1>与中心对齐，并在同一div中将<p>对齐到右侧

3 个答案: