web-dev-qa-db-fra.com

aligner les icônes sur le texte

Quelle est la meilleure façon d'aligner les icônes (à gauche) et le texte (à droite) ou le texte opposé à gauche et l'icône à droite?

L'image et le texte de l'icône doivent-ils être de la même taille? Idéalement, je voudrais qu'ils soient différents mais sur le même alignement vertical.

J'utilise la propriété css d'arrière-plan pour obtenir les icônes d'une image plus grande.

Voici comment je le fais maintenant, mais j'ai du mal à les amener à être sur la même ligne ou à être alignés verticalement vers le bas.

Texte

C'est ce que j'obtiens après avoir essayé vos suggestions.

Bien que le texte soit maintenant aligné sur l'icône, il est superposé à l'icône à droite de l'icône que je souhaite. Veuillez noter que j'utilise la position d'arrière-plan pour afficher l'icône à partir d'un ensemble d'images plus grand.

En gros, je reçois

<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;
}
csscss-sprites
20
badnaam

J'utilise généralement 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>
37
rossipedia

Vous pouvez le faire sur la même ligne en utilisant l'alignement vertical et la hauteur de ligne

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

Alternativement, vous pouvez utiliser l'approche en arrière-plan sans répétition et positionnement:

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>
24
Jamie Wong

Malheureusement, aucune de ces réponses n'est à l'épreuve des balles et chacune a un gros défaut.

@rossipedia J'ai utilisé pour implémenter toutes mes icônes de cette façon et cela fonctionne très bien. Mais, et c'est un gros mais, cela ne fonctionne pas avec les sprites, car vous utilisez la propriété background-position pour positionner l'icône à l'intérieur du conteneur qui inclut votre texte. Et ne pas utiliser de sprites où vous le pouvez est mauvais pour les performances et le référencement, ce qui les rend impératifs pour tout bon site Web moderne.

@Jamie Wong La première solution a deux défauts de balisage. Utiliser des éléments sémantiquement correctement est malheureusement sous-estimé par certains, mais vous verrez les avantages de prioriser la forme dans votre classement dans les moteurs de recherche. Donc, tout d'abord, vous ne devez pas utiliser de p-tag lorsque le contenu n'est pas un paragraphe. Utilisez plutôt span. Deuxièmement, la balise img est destinée à contenu uniquement. Dans des cas très spécifiques, vous devrez peut-être ignorer cette règle, mais ce n'est pas l'un d'entre eux.

Ma solution: je ne vais pas vous mentir, j'ai vérifié beaucoup d'endroits dans mon temps et à mon humble avis, il n'y a pas de solution optimale. Ces deux solutions sont cependant celles qui s'en rapprochent le plus:

Solution de blocage en ligne

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;" est une belle chose. Vous pouvez en faire tellement et il joue très bien avec un design réactif. Mais cela dépend de votre client. Inline-Block ne fonctionne pas bien avec IE6, IE7 et pose toujours des problèmes avec IE8. Personnellement, je ne supporte plus IE6 et 7, mais IE8 est toujours disponible. Si votre client a vraiment besoin que son site Web soit utilisable dans IE8, le blocage en ligne n'est malheureusement pas une option. Évaluez-le d'abord. Remplacez l'arrière-plan noir de l'élément icône par votre Sprite, positionnez-le, lancez sans répétition dedans et voilà, vous l'avez. Oh oui, et en plus, vous pouvez aligner le texte comme vous le souhaitez avec l'alignement vertical.

P.S .: Je sais qu'il y a une balise HTML vide, si quelqu'un a une suggestion sur la façon de la remplir, je serais reconnaissant.

Solution à hauteur fixe

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

Je déteste celui-ci. Il utilise une hauteur de ligne fixe pour le texte et si vous choisissez la même hauteur que la boîte de l'icône, le texte est centré sur cette hauteur. Pour aligner le texte en haut, coupez la hauteur de la ligne et en bas, vous devrez corriger cela avec la position: absolue et une largeur et une hauteur fixes pour le conteneur. Je ne vais pas m'y atteler à moins que quelqu'un ne le demande, car c'est un problème pour lui-même et qui comporte beaucoup d'inconvénients. Le principal inconvénient de ce chemin est la hauteur fixe. Les hauteurs fixes sont toujours flexibles et en particulier avec le texte, cela peut provoquer un tas de problèmes (vous ne pouvez plus mettre à l'échelle le texte en tant qu'utilisateur sans qu'il soit coupé, plus différents navigateurs rendent le texte différemment). Assurez-vous donc que dans aucun navigateur le texte est coupé et qu'il a une certaine marge de manœuvre à l'intérieur de sa hauteur de ligne. P.S .: N'oubliez pas le clearfix du conteneur. Et, bien sûr, remplacez le fond noir par votre Sprite et selon la position + pas de répétition.

Conclusion

Utilisez le bloc en ligne si possible. ;) Si ce n'est pas le cas, respirez profondément et essayez la deuxième solution.

12
Merritt6616