css: alinea el texto debajo de la imagen en un lapso

Quiero mostrar el texto debajo de la imagen en estos lapsos y los lapsos no saltan a la nueva línea:

<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;

alguna sugerencia?

preguntado el 11 de septiembre de 13 a las 14:09

¿Qué texto estás tratando de agregar a continuación? ¿Es esa la parte :sm:, :sq:? -

10 Respuestas

DEMO

enter image description here

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

Respondido el 11 de Septiembre de 13 a las 14:09

Agrega esto a tu clase.

.smileycode
{
display:block;
}

Esto convertirá su tramo en elementos de nivel de bloque y los hará saltar a la siguiente línea.

Espero que esto sea lo que estás buscando.

EDITAR

Si desea asegurarse de que el texto aparece como un título justo debajo de la imagen, puede utilizar display:table-caption; para lograrlo.

A continuación se muestra un ejemplo de trabajo.

DEMO

El CSS:

.smileycode{display:table-caption;}

Espero que esto ayude.

Respondido el 11 de Septiembre de 13 a las 14:09

Natán tiene razón. Alternativamente, podría usar un elemento de nivel de bloque en lugar de un lapso, como un div - jono

display:table-caption fue muy bueno - Exim

También puede agregar un float:left a .smileycode para ponerlo uno al lado del otro. Por ejemplo, .smileycode{display:table-caption; float:left;} - @exim - nitesh

Puedes probar este código. Como puedes ver he hecho una tabla sin bordes que muestra las imágenes como quieras.

<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>

Ejemplo de trabajo: violín

Respondido el 11 de Septiembre de 13 a las 14:09

Sólo otra forma en que tú podría solucionar este problema... Aprovechando :after y atributos personalizados.

HTML con atributos personalizados

<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 con pseudoelementos

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

DEMO

Respondido el 11 de Septiembre de 13 a las 14:09

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;
}

Respondido el 11 de Septiembre de 13 a las 14:09

Veo algunos table enfoque basado aquí. Como soy más una persona sin mesa, ofrezco una solución de apilamiento a la izquierda usando float: left.

Tendrá que envolver su tramo existente con un tramo más que lo haga flotar hacia la izquierda.

<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;
}

Violín de trabajo: http://jsfiddle.net/bND5Z/

Respondido el 11 de Septiembre de 13 a las 14:09

Esto no es tan difícil. Uso efectivo de <pre> / <br> y entonces display style hará el truco para usted. Vea el código a continuación:

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>

Vea la solución de trabajo aquí: http://jsbin.com/AHiYuPO/2/edit . Recuerda run with js.

Respondido el 11 de Septiembre de 13 a las 14:09

no quiero usar tablas - Exim

No tienes que usar tablas si no quieres. Vea mi respuesta actualizada arriba @exim - El caballero oscuro

Basado en un imagen usted me proporcionó, aquí hay una solución completa.

Margen:

<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

Respondido el 11 de Septiembre de 13 a las 14:09

.smileycode {
    float: left;
    margin-right: 10px;
}

.smileycode img {
    display: block;
}

jsFiddle

Respondido el 11 de Septiembre de 13 a las 14:09

Como dijo @Roko, pero agregue un hack css para compatibilidad con IE antiguos: 

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

También agregaría un 

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

a tu lapso. ¡Pero es solo un detalle de diseño :) como otros pueden haber agregado en sus ejemplos!

También puedes limpiar todos tus &nbsp; de tu código HTML (si puedes)

Respondido el 11 de Septiembre de 13 a las 14:09

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.