让图像不要将兄弟姐妹转移到一边

Question

我遇到了一个问题，如果我将图像作为兄弟添加到元素中，那么该元素将移位以容纳插入的图像。我想要的是即使插入图像也要保持水平居中的元素。以下是该问题的图片：

每一行都是它自己的div，带有p元素和一个可选图像，这是红色的解释点。我希望p元素包含文字＆＃34;已损坏＆＃34;即使与插入的兄弟姐妹保持水平对齐。

这是我的CSS：

#friendsList div{
    padding-top: 15px;
    padding-bottom: 15px;
    margin: 0;
    display: table
    width: 100%;
}

#friendsList div p{
    display: inline;
}

插入的图片有这样的css：

#friendsList div img {
   margin-bottom: 5px, 
   float: right, 
   vertical-align:middle
}

有没有办法让p元素保持水平对齐，即使它有兄弟姐妹？

编辑***这是一个CSSdeck示例：http://cssdeck.com/labs/2uel0ogm

Answer 1

我想到了以下可能性：

1. 将图片添加为背景图片，然后使用background-position。
2. 将position: relative应用于div，并将position: absolute; right: 5px; top: 5px;应用于图像。这使得图像绝对位于div中作为容器。

Answer 2

将图片左侧放置到p标记，并将float: right提供给img。 见例子

＆＃13;

＆＃13;

#friendsList div{
 padding-top: 15px;
 padding-bottom: 15px;
   	 margin: 0;
 display: table
 width: 100%;
 background: orange;
 border: 1px solid red;
}

#friendsList div p{
 display: block;
 margin: 0 auto;
 text-align: center;
}

#friendsList div img {
 float: right;
 height: 25px;
 width: 25px;
 margin-left: -25px;
}

＆＃13;

<div id="friendsList">
  <div><p>first</p></div>
  <div><img src="http://icons.iconarchive.com/icons/oxygen-icons.org/oxygen/128/Emotes-face-smile-icon.png" alt=""><p>second</p></div>
</div>

＆＃13;

＆＃13;

＆＃13;

替代解决方案（使用position属性）

＆＃13;

＆＃13;

#friendsList div{
	padding-top: 15px;
	padding-bottom: 15px;
	margin: 0;
	display: table;
	width: 100%;
	background: orange;
	border: 1px solid red;
	position: relative;
}

#friendsList div p{
	display: block;
	margin: 0 auto;
	text-align: center;
}

#friendsList div img {
	position: absolute;
	right: 0;
	height: 25px;
}

＆＃13;

<div id="friendsList">
	<div><p>first</p></div>
	<div><img src="http://icons.iconarchive.com/icons/oxygen-icons.org/oxygen/128/Emotes-face-smile-icon.png" alt=""><p>second</p></div>
</div>

＆＃13;

＆＃13;

＆＃13;