如代码所示,我的 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/
最佳答案
要使 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>
关于html - 如何对齐盒子的内容,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38186523/