Позиция изображения + текст вместе?

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, вам не нужно четкое: оба, просто поместите clearfix на внешний div.