Aligner les boutons Facebook et Twitter

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

Article publié le 6 avril 2017  Mot(s) clé :   Enregistrer au format PDF   Version PDF

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 :