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

Question

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

0

Как мне поместить мой текст в центр изображения, вот что он выглядит прямо сейчас: 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>

Я был бы очень признателен, если бы кто-то помог мне справиться с этим.

user2989236 28 нояб. 2013, в 22:15

Источник

Теги:

html

css

2 ответа

0

Демо: 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.

Christina 28 нояб. 2013, в 19:24

0

Вы складываете это? Куда они идут. Если вы используете это, его нужно будет очистить на главной обертке для укладки, или вы обмотаете обертку вокруг обертки.
Christina 28 нояб. 2013, в 21:03

Ещё вопросы

Вы складываете это? Куда они идут. Если вы используете это, его нужно будет очистить на главной обертке для укладки, или вы обмотаете обертку вокруг обертки.

Alessandro Minoccheri · Accepted Answer · 2013-11-28T18-17-00.000Z

попробуйте вставить изображение внутри 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

Хм, это работает, но часть изображения пропала (внизу), и мне нужно было бы создать новый код в CSS для каждого изображения, которое я собираюсь использовать, то есть 20+.
редактировать ответ и демо1 теперь изображение заполнено @ user2989236
Хорошо, спасибо за помощь, это сработало!