Blanche de Peuterey.com

Mettre l’Internet au service des petites structures et de la famille

Aligner les boutons Facebook et Twitter

Accueil > Nouvelles brèves > Aligner les boutons Facebook et Twitter

Petite astuce CSS pour aligner les boutons Facebook et Twitter, tels que ceux placés en haut de cet article.

Lorsque vous insérez le code pour le bouton Twitter, par l’intermédiaire d’un Iframe, votre site affiche le code suivant :

<iframe id="twitter-widget-0" scrolling="no" allowtransparency="true" class="twitter-share-button twitter-share-button-rendered twitter-tweet-button" style="position: static; visibility: visible; width: 71px; height: 20px;" title="Twitter Tweet Button" src="http://platform.twitter.com/widgets/tweet_button.822866e4b050d0b8bbb7f5fa8ac5e58b.fr.html#dnt=false&amp;id=twitter-widget-0&amp;lang=fr&amp;original_referer=http%3A%2F%2Flocalhost%2FEditions_BdP%2F%3Ffond%3Dcontenu%26id_contenu%3D85%26id_dossier%3D5&amp;size=m&amp;text=ebooks%20sur%20la%20pri%C3%A8re%20Les%20Editions%20Blanche%20de%20Peuterey&amp;time=1491487966998&amp;type=share&amp;url=http%3A%2F%2Flocalhost%2FEditions_BdP%2F%3Ffond%3Dcontenu%26id_contenu%3D85%26id_dossier%3D5" frameborder="0"></iframe>

Vous avez une classe twitter-share-button qui a le style suivant :

element.style {
  height: 20px;
  position: static;
  visibility: visible;
  width: 71px;
}

Pour que le bouton Twitter soit aligné, il faut le passer en position:relative avec un top:4px
Dans votre feuille de style, créez le style suivant :
.twitter-share-button{position:relative!important;top:4px;}
Forcez la position avec !important (sinon, à cause de element.style, elle ne sera pas prise en compte)

Faites de même avec le bouton Google +
#___plusone_0{position:relative!important; top:4px;}
Et voilà le résultat :

Ces articles peuvent vous intéresser

D'autres articles avec le mot clé « HTML »