Question

我想要一个div，左边是两个图像，右边是一些文本，右边是一些文字。

问题在于我无法弄清楚如何在保持居中和右对齐的同时将p元素放在同一行中

HTML：

<div class="outer">
    <img class="icon" src="http://www.mobafire.com/images/champion/icon/leona.png" />
    <img class="icon" src="http://www.mobafire.com/images/champion/icon/leona.png" />
    <p class="center" >centered</p>
    <p class="right" >right</p>
</div>

CSS：

.outer {
    height: 50px;
    width: 800px;
}

.icon {
    width: 44px;
    height: 44px;
}

.outer p {
    margin 0;
}

.center {
    text-align: center;
    width: auto;
}

.right {
    text-align: right;
    width: auto;
}

Answer 1

用div替换所有p。然后写css代码。文本排成一行。

希望这有效。

＆＃13;

.outer {
    height: 50px;
    width: 800px;
}

.icon {
    width: 44px;
    height: 44px;
}

.outer p {
    margin 0;
}

.center {
    margin-left:50%;
    
    width: auto;
  position:absolute
}

.right {
     margin-left:100%;
    width: auto;
   position: absolute;
 
}

＆＃13;

<div class="outer">
    <img class="icon" src="http://www.mobafire.com/images/champion/icon/leona.png" />
    <img class="icon" src="http://www.mobafire.com/images/champion/icon/leona.png" />
    <div class="center" >centered</div>
    <div class="right" >right</div>
</div>

＆＃13;

Answer 2

我非常确定你想要这样的东西。虽然你的问题不明确。永远不要忘记编写具有语义含义的代码。这是您的解决方案遵循更多语义方式：codepen。

或者在这里：

＆＃13;

.outer {
  height: 50px;
  width: 800px;
  overflow: hidden;
}
.column {
  width: 33.33%;
  float: left;
}
.icon {
  width: 44px;
  height: 44px;
  margin-right: 10px;
}
.center {
  text-align: center;
}
.right {
  text-align: right;
}

＆＃13;

<div class="outer">
  <div class="column">
    <img class="icon" src="http://www.mobafire.com/images/champion/icon/leona.png" />
    <img class="icon" src="http://www.mobafire.com/images/champion/icon/leona.png" />
  </div>

  <div class="column">
    <p class="center">centered</p>
  </div>

  <div class="column">
    <p class="right">right</p>
  </div>
</div>

＆＃13;

Answer 3

针对OP的评论修改了代码：

.outer {
  height: 50px;
  width: 300px;
  position: relative;
}
.icon {
  width: 44px;
  height: 44px;
  float: left;
}
.center {
  text-align: center;
  width: 100%;
  position: absolute;
  left: 0;
}
.right {
  position: absolute;
  right: 0;
  width: auto;
}

<div class="outer">
  <img class="icon" src="http://www.mobafire.com/images/champion/icon/leona.png" />
  <img class="icon" src="http://www.mobafire.com/images/champion/icon/leona.png" />
  <p class="center">centered</p>
  <p class="right">right</p>
</div>

划分中间和右侧的文字

3 个答案: