html - 中间和右边有文字的div

Question

我想要一个 div，左侧有两个图像，一些居中的文本和一些右侧的文本。

众多尝试之一: http://jsfiddle.net/yu8bz4h4/

问题是我无法弄清楚如何在保持居中和右对齐的同时让 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

把p全部换成div，然后写css代码，文字排成一行。

希望这能奏效。

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

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