Comment créer un bouton de lien avec une icône de bouton et le texte de description de

Salut, je suis en train de créer un bouton de lien avec à la fois une icône de bouton et de description de texte placé à côté de l'icône. J'ai un rembourrage supplémentaire à l'intérieur de la 'Une' des balises afin que le texte sera toujours à la verticale du centre, cependant j'ai essayé d'ajouter l'img et son maintenant poussé le texte vers le bas et l'augmentation de la taille du bouton dans le processus. Des idées où je vais mal?

Je veux faire de ces boutons sensibles pour les petits appareils. Je peux ajuster la taille du bouton ok, mais le son, le texte et l'icône de positionnement qui est le problème parce que je veux à toujours être à la fois à l'horizontale et à la verticale centrée. Est-il un moyen facile de créer des boutons de lien avec une icône et le texte, j'ai cherché partout mais avec peu de succès. Tout tutoriels/conseils seraient appréciés. Voir le code ci-dessous. Merci.

Le code HTML:

<div id="reports_menu_wrapper">

    <div id="reports_menu_content">
        <a href="#" title="Product Charts"><span><img src="imgs/main_products.png" alt="" /></span>Product Charts</a>
        <a href="#" title="Speed Charts">Speed Charts</a>
        <a href="#" title="Financial Charts">Financial Charts</a>
        <a href="#" title="Usage Charts" id="usage">Usage Charts</a>
        <br class="clearFloat"/>
    </div>

Le CSS:

#reports_menu_wrapper 
{
width:100%;
height:auto;
background-color:pink;
margin-top:30px;
}

#reports_menu_content
{
width:824px;
height:auto;
margin:0 auto;
background-color:#fff;
padding:10px;
border:solid 1px #ccc;
}

#reports_menu_content a 
{
display:block;
float:left;
width:198.5px;
background-color:#eee;
padding:18px 0;
outline:solid 1px #ccc;
margin-right:10px;
text-transform:uppercase;
font-size:75%;
color:#333;
}

#reports_menu_content a:hover 
{
background-color:#e6e6e6;
}

#reports_menu_content #usage 
{
margin-right:0;
}


#reports_menu_content a img 
{
margin-right:10px;
}

Utiliser une image d'arrière-plan pour l'icône, à l'aide de <img>, il sera plus difficile d'obtenir la position droite. Faire 2 balise div au-dessus de l'autre, la première div contient la couleur d'arrière-plan, la seconde nécessite l'image de fond: pas de répétition. Mettre le texte dans la deuxième div et de lui donner un rembourrage gauche

OriginalL'auteur user2982873 | 2013-11-14

2

Ce que vous avez besoin est un background-image pour votre a balise et de gérer les padding:
```
#reports_menu_content a 
  {
   background:orange url('yourimage.png') no-repeat left center;
   padding:0 20px 0 42px; /*42 is equal to the padding left = the image size+10px*/
  }
```
Également au centre vertical votre texte, vous pouvez utiliser
```
line-height:40px;
```
Maintenant, si vous voulez des icônes différentes pour chaque bouton que vous pouvez travailler avec un Sprite.

Cochez cette http://jsfiddle.net/Px2zu/8/

Salut merci pour en revenir à moi. J'ai utilisé la méthode que vous avez recommandé et ses travaillé un régal (merci :)) la seule chose étrange, c'est quand j'ajoute 10px alors qu'il y a un bel écart entre l'icône et le bouton, l'icône disparaît lorsque les tests sur un téléphone android et la tablette. Fonctionne très bien sur n'importe quel appareil apple. Si je quitte le 10px écart les icônes s'affichent sur tous les appareils. Les icônes sont .format png. Des idées? Merci encore. background:url(dim/main_products.png) no-repeat center gauche 10px;
Votre code n'est pas valide centre gauche 10px est redondant si vous supprimez le left et seulement dire center 10px alors il peut travailler--- essayez et dites-moi ce qu'il se passe
Salut, malheureusement, il n'a pas de travail, ses déplacé l'icône centre d'horizontales et de 10px à partir du haut. Même si je peux voir l'icône dans tous les appareils android et iphone.
ohh donc il suffit de changer l'ordre ... 10px center
génial fonctionne un régal merci beaucoup 🙂

OriginalL'auteur DaniP
0

Vous pouvez utiliser la propriété css vertical-align à la verticale du centre un élément à un autre. Mais gardez à l'esprit que cet élément doit être un élément inline. Dans votre cas, vous devez appliquer cette propriété avec la valeur middle à votre img éléments que vous voulez qu'ils soient centrés verticalement à vos textes.
```
a img {
  vertical-align: middle;
}
```
Personnellement, je préfère l'utilisation de line-height afin d'verticalement au centre d'un nœud de texte et de ne pas padding. Mais ça marche dans les deux sens.

Cependant, je vous recommande d'utiliser des classes css pour créer les icônes et les boutons.
Le .bt classe de base s'applique bouton de style, par exemple la taille, la frontière, les marges, etc. Un .ico classe est utilisée pour définir le décalage de l'icône qui sera appliquée par l'utilisation d'une autre classe. Cette classe serait nommé d'après l'icône et définit la background de la propriété. Donc, si votre icône affiche une flèche, vous avez probablement un nom il .arrow. Par ailleurs, lors d'un flottant d'une inline élément, il sera automatiquement affiché comme un block élément, donc pas besoin de display propriété.
```
.bt {
    padding: 0 15px;
    float: left;
    border: 1px solid #ccc;
    font: 12px/36px Arial, "sans-serif";
    color: #000;
    text-decoration: none;
}

.bt.ico {
    padding-left: 41px;
}

.ico.arrow {
    background: url("https://cdn0.iconfinder.com/data/icons/entypo/58/under1-16.png") 15px center no-repeat;
}
```
J'ai aussi remarqué que vous utilisez un nœud supplémentaire pour effacer les flotteurs. Pour autant que je sais, c'est pas une bonne pratique pour l'utilisation supplémentaire de balisage pour ça, car il ne contient pas de données. Une bien meilleure pratique serait d'utiliser un pseudo-élément. Le :after pseudo élément appliqué à votre wrapper #reports_menu_content avec les propriétés css suivantes nettoiera les flotteurs:
```
.clear:after {
  display: block;
  content: '';
  clear: both;
}
```
Et encore, utiliser une classe pour elle, de sorte qu'il peut également être appliqué à d'autres wrappers.

J'ai préparé un petit violon qui montre les points mentionnés ci-dessus: http://jsfiddle.net/w33Vk/5/

OriginalL'auteur r4vn

Vous devez vous connecter pour publier un commentaire.