css - justificar - etiquetas html

alinear iconos con texto

Question

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

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

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

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

Texto

Esto es lo que recibo después de probar tus sugerencias.

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

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

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

@rossipedia Solía ​​implementar todos mis íconos de esta manera y funciona bastante bien. Pero, y este es un gran pero, no funciona con sprites, ya que está utilizando la propiedad de posición de fondo 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 y bueno.

@Jamie Wong La primera solución tiene dos defectos de marcado. Lamentablemente, algunos elementos subestiman el uso correcto de los elementos de forma semántica, pero verás los beneficios de 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 es un párrafo. Utilice span en su lugar. En segundo lugar, la etiqueta img está destinada solo para el contenido . En casos muy específicos, es posible que tenga que ignorar esta regla, pero esta no es una de ellas.

Mi solución: no le mentiré, he registrado muchos lugares en mi tiempo y, en mi humilde opinión, no hay una solución óptima. Estas dos soluciones son las que se acercan más a eso, sin embargo:

Solución de bloque en línea

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 él y juega muy bien con un diseño sensible. Pero depende de tu cliente. Inline-Block no funciona bien con IE6, IE7 y todavía causa problemas con IE8. Personalmente, ya no soy compatible con IE6 y 7, pero IE8 todavía está disponible. Si su cliente realmente necesita que su sitio web sea utilizable en IE8, el bloque en línea lamentablemente no es una opción. Evalúa esto primero. Reemplace el fondo negro del icono-elemento con su sprite, colóquelo, lance no-repetir allí y voilà, ahí lo tiene. Ah, sí, y como un punto a favor, puedes alinear el texto de la forma que desees con la alineación vertical.

PD: Soy consciente de que hay una etiqueta HTML vacía allí, si alguien tiene alguna sugerencia sobre cómo llenarlo, le estaré agradecido.

Solución de 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 este. 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 en esa altura. Para alinear el texto con la parte superior, corte la altura de la línea y, en cuanto a la parte inferior, tendrá que corregir eso con la posición: absoluta y una anchura y altura fijas para el contenedor. No voy a entrar en eso a menos que alguien lo solicite, porque es todo un problema por sí mismo y trae consigo muchas desventajas. La principal desventaja de este camino es la altura fija. Las alturas fijas son siempre poco flexibles y, especialmente con el texto, pueden causar una gran cantidad de problemas (ya no se puede escalar el texto como usuario sin que se corte, más los navegadores diferentes representan el texto de forma diferente). Así que asegúrese de que en ningún navegador el texto esté cortado y que tenga cierto margen de maniobra dentro de la altura de la línea. PD: No olvides el clearfix para el contenedor. Y, por supuesto, reemplaza el fondo negro con tu sprite y la posición correspondiente + no repetición.

Conclusión

Use el bloque en línea si es posible. ;) Si no es así, respira profundamente y prueba la segunda solución.

Answer 2

Puede hacerlo en la misma línea usando alineación vertical y altura de línea

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

Alternativamente, puede ir al enfoque de fondo sin repetir y posicionando:

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

Suelo usar el 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>