位置圖片+文字在一起？

Question

我怎麼會去把我的文字在圖像的中心，這是個什麼樣子，現在：http://gyazo.com/442aa9f927c1c1ee505435c2422f7322.png

，這是我希望它是：http://gyazo.com/bc3bb2d0472a1c963d4ac00081065461.png

這是我當前的代碼：

<p><img src="http://findicons.com/files/icons/941/web_design/32/page_text.png" /> Some random text</p> 

我真的很感激，如果有人能幫助我與此。

Answer 1

嘗試插入一個div內的圖像，並把文字上這樣說：

<div class="img"> 
    <p>your text</p> 
</div> 

CSS：

.img{ 
    background: url('http://findicons.com/files/icons/941/web_design/32/page_text.png') no-repeat; 
    height:100%; 
} 

DEMO

後，您可以模式您的文字，你想要

如果你不想使用像backgrou一樣的圖像第二，你只想把文字在你的元素的中心試試這個：

<div class="container"> 
    <img src="http://findicons.com/files/icons/941/web_design/32/page_text.png" /> 
    <span>your text</span> 
    <br style="clear:both;" /> 
</div> 

CSS

.container{ 
    width:100%; 
    height:100px; 
} 

.container span{ 
    line-height:30px; 
    float:left; 
} 

.container img{ 
    float:left; 
} 

DEMO2

Answer 2

演示： http://jsfiddle.net/5ser6/1/

<div class="thingy"> 
    <img src="http://findicons.com/files/icons/941/web_design/32/page_text.png" alt="" />   
     <p>Text</p> 
    <br style="clear:both;"> 
    </div> 


    * {font-family:arial} 
    .thingy img {float:left;} 
    .thingy {height:32px;float:left;} 
    .thingy p {float:left;margin:0 0 0 10px;padding:0;line-height:32px;} 

如果你的框架有一個clearfix，你不需要清楚：兩者，只是在外部div上放一個clearfix。