html - 如何对齐盒子的内容

Question

如代码所示，我的 html 中有两个段落:

<div class="mainhead">
    <p class="paragraph">This is a paragraph</p>
    <div class="info">
            <p><span class="infomail">info@zazzoo.co.za</span> <span class="infonumber">082 888 7385 </span></p>
        </div>  
</div><!-- end of mainhead --> 

下面是css:

.mainhead {
  background-color: #d9edf7;
  width: 100%;
  display: flex;
}
.info{
  text-align: right;
}
.mainhead .parapgraph{
    text-align: center;
}

如何将 div 信息对齐到最右侧并使段落居中？

这也是我的 jsfiddle:https://jsfiddle.net/Wosley_Alarico/60a8qw5L/

Answer 1

要使 p 完美居中并且不受 .info 宽度的影响，您可以使用 position: absolute 然后只需添加 float :在 .info 上向右。您还可以使用 overflow: hidden 清除 float 并固定高度。

.mainhead {
  background-color: #d9edf7;
  width: 100%;
  position: relative;
  overflow: hidden;
}
.mainhead > p {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
}
.info {
  float: right;
}

<div class="mainhead">
  <p>This is a paragraph</p>
  <div class="info">
    <p><span class="infomail">info@zazzoo.co.za</span>  <span class="infonumber">082 888 7385 </span>
    </p>
  </div>
</div>

如果你想在减去 .info 的宽度后留下的空间中将 paragraph 居中，那么你可以使用 Flexbox 并添加边距自动

.mainhead {
  background-color: #d9edf7;
  display: flex;
}
.mainhead > p, .info {
  margin-left: auto;
}

<div class="mainhead">
  <p>This is a paragraph</p>
  <div class="info">
    <p><span class="infomail">info@zazzoo.co.za</span>  <span class="infonumber">082 888 7385 </span>
    </p>
  </div>
</div>