html - 将图片+文字放在一起？

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

在你可以在你想要的地方调整你的文本之后

如果您不想将图像用作背景，而只想将文本放在元素的中心，请尝试以下操作:

<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