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: right上添加.info。您还可以使用overflow: hidden清除浮动并修复高度。

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

如果您希望将paragraph置于减去.info宽度时留下的空格中，那么您可以使用Flexbox并添加边距auto

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 2

请你试试这个

您还可以将类添加到p标记以避免内联样式。

<div class="mainhead">  
    <div class="info">
        <p style=" display: inline-block;">This is a paragraph</p>
        <p style="float: right; display: inline-block;"><span class="infomail">info@zazzoo.co.za</span> <span class="infonumber">082 888 7385 </span></p>
    </div>
</div>

.info {
    text-align: center;
        background-color: #d9edf7;
}

Answer 3

这是flexbox的解决方案。检查以下代码：

＆＃13;

.mainhead {
      background-color: #d9edf7;
  width: 100%;
  display: flex;
}
.mainhead p:first-child { flex: 1; text-align: center; }
.info{
	text-align: right;
  flex: none;
}
.mainhead img{
	text-align: center;
}

＆＃13;

<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>

＆＃13;

您可以为信息DIV添加一些最大宽度。

Answer 4

您可以使用position: absoute和right: 0px将其放在最右侧。

.info{
     position: absolute;
    right: 0px;
    width: 300px;
}

对于段落，您可以使用text-align: center;

p {
  text-align: center;
}

就像你在JSFiddle中看到的那样：https://jsfiddle.net/davidgourde/afsoq8du/

如果您希望将两者放在一起，可以使用float: right。

Answer 5

试试这个，

.mainhead {
    background-color: #d9edf7;
    width: 100%;
    height:100px;
}
p{
  text-align:center;/*Use this for both p tag text-align center*/
}
.info{
    float:right;
    width:100%;
    /*text-align:center;*/ /*Use this if you want p text-align center of .info p tag*/
}

如何对齐盒子的内容

5 个答案: