alinee los iconos con el texto

Question

¿Cuál es la mejor manera de alinear los iconos (izquierda) y el texto (derecha) o el texto opuesto a la izquierda e ícono a la derecha?

¿La imagen del icono y el texto tienen que ser del mismo tamaño? Idealmente me gustaría que sean diferentes pero que estén en la misma alineación vertical.

Estoy usando la posición de fondo de la propiedad css para obtener los iconos de una imagen más grande.

Así es como lo hago ahora, pero estoy luchando con conseguir que estén en la misma línea o alineados verticalmente en la parte inferior.

texto

Esto es lo que me pasa después Trato sus sugerencias.

Aunque el texto ahora está alineado con el ícono, se superpone sobre el ícono a la derecha del ícono que yo quiero. Tenga en cuenta que estoy usando la posición de fondo para mostrar el icono de un conjunto de imágenes más grande.

Básicamente estoy recibiendo

<icon><10px><text_and_unwanted_icon_to_the_right_under_it> 
<span class="group3_drops_icon group3_l_icon" style="">50</span> 

group3_drops_icon { 
background-position:-50px -111px; 
} 

.group3_l_icon { 
-moz-background-clip:border; 
-moz-background-inline-policy:continuous; 
-moz-background-origin:padding; 
background:transparent url(/images/group3.png) no-repeat scroll left center; 
height:35px; 
overflow:hidden; 
padding-left:55px; 
} 

Answer 1

lo general el uso background:

<style type="text/css"> 
.icon { 
background-image: url(path/to/my/icon.jpg); 
background-position: left center; 
background-repeat: no-repeat; 

padding-left: 16px; /* Or size of icon + spacing */ 
} 
</style> 

<span class="icon">Some text here</span> 

Answer 2

Puede hacerlo en la misma línea usando vertical-align y line-height

<p style='line-height: 30px'> 
    <img src='icon.gif' style='vertical-align: middle' />Icon Text 
</p> 

Alternativamente, puede ir el enfoque de fondo con no-repeat y posicionamiento:

span.icontext { 
    background: transparent url(icon.gif) no-repeat inherit left center; 
    padding-left: 10px /* at least the width of the icon */ 
} 

<span class="icontext"> 
    Icon Text 
</span> 

Answer 3

Lamentablemente, ninguna de estas respuestas es a prueba de balas y cada una tiene un gran defecto.

@rossipedia Solía ​​implementar todos mis iconos de esta manera y funciona bastante bien. Pero, y esto es un gran pero, no funciona con sprites, ya que está usando la propiedad background-position para colocar el icono dentro del contenedor que incluye su texto. Y no usar sprites donde puedas es malo para el rendimiento y el SEO, lo que los hace imprescindibles para cualquier sitio web moderno.

@Jamie Wong La primera solución tiene dos defectos de marcado. El uso de elementos semánticamente correctos es tristemente subestimado por algunos, pero verás los beneficios al priorizar el formulario en el ranking de tu motor de búsqueda. Entonces, en primer lugar, no debe usar una etiqueta p cuando el contenido no sea un párrafo. Use span en su lugar. En segundo lugar, la etiqueta img está destinada al contenido solo. En casos muy específicos, puede que tenga que ignorar esta regla, pero este no es uno de ellos.

Mi solución: No te voy a mentir, he comprobado en muchos lugares en mi tiempo y en mi humilde opinión no existe una solución óptima. Estas dos soluciones son las que más se acercan a esto, sin embargo:

Inline Block-Solución

HTML: 
<div class="container"> 
    <div class="icon"></div> 
    <span class="content">Hello</span> 
</div> 

CSS: 
.container { 
    margin-top: 50px; 
} 

.container .icon { 
    height: 30px; 
    width: 30px; 
    background: #000; 
    display: inline-block; 
    vertical-align: middle; 
} 
.container .content { 
    display: inline-block; 
    vertical-align: middle; 
} 

"display: inline-block;" es una cosa hermosa Puedes hacer mucho con eso y juega muy bien con un diseño receptivo. Pero depende de su cliente. Inline-Block no funciona bien con IE6, IE7 y todavía causa problemas con IE8. Personalmente ya no soporto IE6 y 7, pero IE8 aún está disponible. Si su cliente realmente necesita que su sitio web sea utilizable en IE8, lamentablemente no existe ninguna opción en línea. Evalúa esto primero. Reemplaza el fondo negro del elemento icono con tu sprite, colócalo, lanza no-repeat allí y voilà, ahí lo tienes. Ah, sí, y como ventaja, puede alinear el texto de la forma que desee con la alineación vertical.

P.S .: Soy consciente de que hay una etiqueta HTML vacía allí, si alguien tiene alguna sugerencia sobre cómo llenarla, le agradecería.

Solución Altura fija

.clearfix:after { 
    content: "."; 
    display: block; 
    clear: both; 
    visibility: hidden; 
    line-height: 0; 
    height: 0; 
} 

.clearfix { 
    display: inline-block; 
} 

html[xmlns] .clearfix { 
    display: block; 
} 

* html .clearfix { 
    height: 1%; 
} 
.container { 
    margin-top: 50px; 
    border: 1px solid #000; 
} 

.container .icon { 
    height: 30px; 
    width: 30px; 
    background: #000; 
    float:left; 
} 
.container .content { 
    line-height: 30px; 
    float: left; 
    display: block; 
} 

odio éste. Utiliza una altura de línea fija para el texto, y si elige la misma altura que el cuadro del icono, el texto se centra a esa altura. Para alinear el texto a la parte superior, corte la altura de la línea, y en la parte inferior, tendrá que arreglarlo con la posición: absoluta y un ancho y alto fijos para el contenedor. No voy a entrar en eso a menos que alguien lo solicite, porque es todo un problema en sí mismo y trae consigo muchas desventajas. La principal desventaja de esta ruta es la altura fija. Las alturas fijas son siempre inflexibles y especialmente con el texto, puede causar muchos problemas (ya no se puede escalar el texto como usuario sin que se corte, además de que los navegadores diferentes procesan el texto de manera diferente). Así que asegúrese de que en ningún navegador el texto esté cortado y que tenga algún margen de maniobra dentro de su altura de línea. P.S .: No olvide el clearfix para el contenedor. Y, por supuesto, reemplace el fondo negro con su sprite y según la posición + no-repeat.

Conclusión

Uso inline-block, si es posible. ;) Si no es así, respire profundamente y pruebe la segunda solución.