如何使 div 的文字和图标正确

Question

如何使 div 像这张照片一样在中间放置文字和图标

Answer 1

div{
  text-align: center;
  background: red;
}
div img{
  float: right;
}

Answer 2

文字在右图中间

<div style="text-align: center;">
    <img style="position: absolute; right:2.5%;">

Answer 3

有两种方法可以使用以下方法

内联方法

div style="text-align: center;">
    <img style="position: absolute; right:2.5%;">

外部CSS方法

div{
  text-align: center;
  background: red;
}
div img{
 float: right;
}

Answer 4

希望这就是你想要的。

#red {
width:500px;
  height:100px;
  padding:20px;
  background-color:#f70c1e;
  color:white;
  line-height:100px;
  font-size:40px;
  font-family:sans-serif;
  text-align:center;
  
}
img{
float:right;
}

<div id="red"> Yada yada .
  <img src="http://content.nike.com/content/dam/one-nike/en_us/season-2012-su/open-graph/onenike_homepage_v1_opengraph_100x100.jpg" alt="">
  </div>

Answer 5

你也可以把它放在 table:

<table>
<tr>
<td style='text-align:center;'>Text</td>
<td>Image</td>
</tr>
</table>

还有一些 css 用于填充

如何使 div 的文字和图标正确

How to make div with text and icon right

html

css

内联方法

外部CSS方法