All geek questions in one place

Css - align text under the image in the gap

I want to show the text below the image in these spaces, and the spaces do not jump to a new line:

<span class="smileycode" id=":sm:"> <img src="images/smiley/sm.png">:sm: </span>&nbsp; <span class="smileycode" id=":sq:"> <img src="images/smiley/sq.png">:sq: </span>&nbsp;

any suggestion?

+4
source share
10 answers

Demo

enter image description here

 .smileycode{ display:inline-block; } .smileycode img{ display:block; }
+4
source

Add this to your class.

 .smileycode { display:block; }

This will transform you into block level elements and force them to move to the next line.

Hope this is what you are looking for.

EDIT

If you want the text to look like an inscription just below the image, you can use display:table-caption; to achieve this.

The following is a working example.

Demo

CSS:

 .smileycode{display:table-caption;}

Hope this helps.

+3
source

You can try this code. As you can see, I created a borderless table that displays images as I see fit.

 <table id="yourid" border="0"> <tr> <td width="50%"> <span class="smileycode" id=":sm:"><img src="http://i.imgur.com/ngS6rsb.png"></span> </td> <td width="50%"><span class="smileycode" id=":sq:"><img src="http://i.imgur.com/ngS6rsb.png"></span> </td> </tr> <tr> <td width="50%"> :sm: </td> <td width="50%">:sq: </td> </tr>

Working example: fiddle

+2
source

Another way to solve this problem ... Using :after and custom attributes.

HTML w / custom attrs

 <span class="smileycode" id=":sm:" data-text=":sm:"> <img src="http://placehold.it/50x50"> </span> <span class="smileycode" id=":sq:" data-text=":sq:"> <img src="http://placehold.it/50x50"> <span class="smileycode" id=":sm:" data-text=":sm:"> <img src="http://placehold.it/50x50"> </span> <span class="smileycode" id=":sq:" data-text=":sq:"> <img src="http://placehold.it/50x50"> <span class="smileycode" id=":sm:" data-text=":sm:"> <img src="http://placehold.it/50x50"> </span> <span class="smileycode" id=":sq:" data-text=":sq:"> <img src="http://placehold.it/50x50"> </span>

CSS w / pseudo elements

 .smileycode { position: relative; } .smileycode:after { position: absolute; content: attr(data-text); top: 1em; left: 0; z-index: 1; }

Demo

+1
source

It is not that difficult. Using <pre> / <br> effectively and then display style will do the trick for you. See code below:

HTML:

  <body> <span class="smileycode" style="display:inline-table" id=":sm:"> <img src="images/smiley/sm.png"><pre>:sm:</pre> </span>&nbsp; <span class="smileycode" style="display:inline-table" id=":sq:"> <img src="images/smiley/sq.png"><pre>:sq:</pre> </span>&nbsp; </body>

See a working solution here: http://jsbin.com/AHiYuPO/2/edit . Remember run with js .

0
source

http://jsfiddle.net/hcDne/

 <div class="smileycode" id=":sm:"><img src="http://www.zeropages.com/smileys/sm_2828a.gif">:sm:</div>&nbsp;<div class="smileycode" id=":sq:"><img src="http://www.zeropages.com/smileys/sm_2828a.gif">:sq:</div> .smileycode{ width:30px; text-align:center; float:left; }
0
source

I see here some table approach. Since I am no longer without a table, I propose a solution on the left side using float: left .

You will have to wrap your existing range with another span that will float to the left.

 <span class="pull-left"><span class="smileycode" id=":sm:"> <img src="http://placehold.it/50x50/dddddd/ffffff">:sm: </span></span>&nbsp; <span class="pull-left"><span class="smileycode" id=":sq:"> <img src="http://placehold.it/50x50/dddddd/ffffff">:sq: </span></span>&nbsp;

CSS:

 span.smileycode img { display: block; } .pull-left { float: left; margin-right: 5px; }

Working fiddle: http://jsfiddle.net/bND5Z/

0
source 
 .smileycode { float: left; margin-right: 10px; } .smileycode img { display: block; }

jsfiddle

0
source

Based on the image you provided me, here is a complete solution.

Markup:

 <div class="smileycode" id=":sm:"> <span>:sm:</span> <img src="http://www.zeropages.com/smileys/sm_2828a.gif" /> </div> <div class="smileycode" id=":sq:"> <span>:sq:</span> <img src="http://www.zeropages.com/smileys/sm_2828a.gif" /> </div>

CSS

 .smileycode { clear:both; padding:5px; } .smileycode span { float:left; padding:3px 0px 0 0; width:30px; } .smileycode img { float:left; }

jsfiddle

0
source

As @Roko said, add hacked css for compatibility with old IE:

  .smileycode { display:inline-block; *display: inline; }

I would also add

  text-align:center; line-height:1.2em;

to your range. But this is just the design of the detail :) how others can add in their examples!

You can also clear your entire &nbsp; your HTML code (if you can)

0
source

Source: https://habr.com/ru/post/1501656/

More articles:


All Articles