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

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，你不需要clear：both，只需在外部div上放一个clearfix。

将图片+文字放在一起？

2 个答案: