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

我想要一个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;
}

最佳答案

修改代码以响应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>