Désalignement de Facebook & boutons Twitter

La page contient deux boutons, de twitter et de facebook.

Ce que je suis en observation dans Firefox 3.5.15 est:

Pendant le chargement de la page, les boutons sont plus ou moins alignées (je veux dire à leurs côtés en bas)
Lorsque la page est chargée, le facebook bouton se déplace de quelques pixels vers le bas, afin que le fond est plus bas que le bas à côté du bouton twitter.
Si je recharge la page, les boutons sont de nouveau alignés, et restent dans cet état, même après le chargement de la page.

Quelqu'un peut-il expliquer ce qu'il se passe et comment le résoudre?

InformationsquelleAutor Roman Cheplyaka | 2011-01-22

51

Trouvé le style qui est le poussant vers le bas ..

Si vous utilisez FireBug et faites défiler vers le bas pour l'iframe dans le FB bouton.

Le style CSS
```
.fb_iframe_widget iframe
```
a cet élément
```
vertical-align: text-bottom;
```
C'est celui qui est le poussant vers le bas.

Vous pouvez remplacer la feuille de style CSS avec le suivant de liste déroulante de sélection et le !important
```
.twitter-share-button[style] { vertical-align: text-bottom !important; }
```
- J'ai effectivement mis en œuvre cette solution il y a quelques semaines et cela a fonctionné parfaitement (d'où le upvote) cependant je viens de remarquer aujourd'hui (16 Mai 2013) que les boutons ne correspondent pas à nouveau. Je pense que Facebook ont fait quelques changements, et maintenant, si je supprimer le text-bottom déclaration de mon .twitter-share-button classe, ils s'alignent à nouveau parfaitement.
- Pour 2015 solution, cochez la case "Dan dot net"'s grande propre réponse
- Merci @consideRatio pour la pointer out
InformationsquelleAutor Guðmundur Þór Magnússon
52

J'ai résolu ce problème en ajoutant vertical-align:top (C'est lors de l'utilisation de leur nouveau balisage HTML5). Mon facebook code du bouton ressemble maintenant à:
```
<script>(function(d){
  var js, id = 'facebook-jssdk'; if (d.getElementById(id)) {return;}
  js = d.createElement('script'); js.id = id; js.async = true;
  js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
  d.getElementsByTagName('head')[0].appendChild(js);
}(document));</script>
<div class="fb-like" data-send="false" data-layout="button_count" data-width="100" data-     show-faces="false" style="vertical-align:top;zoom:1;*display:inline"> </div>
```
J'ai également eu à ajouter de zoom:1 et *display:inline IE7 hack, de sorte que les boutons de montrer côte à côte
- Ils devraient mettre votre visage sur de l'argent. Je vous remercie.
- Génial.. Merci.
- Cela a fonctionné pour moi, mais pas la réponse choisie.
- Meilleure réponse pour vous et encore le travail de réponse de 27 Mai 2014.
- A fonctionné pour moi aussi. Merci!
- Belle réponse, j'ai essayé celui marqué comme solution et ça ne fonctionne pas, bon travail!
InformationsquelleAutor vandre
45

J'ai juste mis tout mes icônes dans un div et ensuite définir la ligne de hauteur sur ce div, donc ils sont tous alignés (car ils sont tous à la même hauteur, et certains sont aligné avec le haut et quelques bas)
```
<div class="product-social-links">
    <a href="//www.pinterest.com/pin/create/but [...] >
       <img src="//assets.pinterest.com/images/pidgets/pinit_fg_en_rect_gray_20.png" />
    </a>

    <div class="fb-like" data-href="@Request.Url.AbsoluteUri" [...] ></div>

    <a href="https://twitter.com/share" class="twitter-share-button" [...] >Tweet</a>
</div>
```
Puis le CSS
```
#product-details-page  .product-social-links {
    line-height: 10px;
}
```
- 2015 : grand sanswer!
- hautement non intrusive. fonctionne parfaitement!
- totalement fonctionné. assurez-vous que 10px
- 2016: fonctionne Encore. Merci!
- 2017: Encore meilleure réponse.
- J'ai eu à utiliser 11px. Testée dans 3 navigateurs, très similaire à celle de l'installation. Ce qui donne?
- Il a changé. Il est maintenant 11px.
InformationsquelleAutor Dan dot net

J'ai résolu ce problème en ajoutant position: relative; top: 4px; à la style attribut de l'facebook iframe.

Ainsi, il ressemble à ceci:

<iframe src="http://www.facebook.com/plugins/like.php?href=http%3A%2F%2Fwww.example.com&amp;layout=box_count&amp;show_faces=true&amp;width=110&amp;action=recommend&amp;colorscheme=light&amp;height=65" scrolling="no" frameborder="0" style="position: relative; top: 4px; border:none; overflow:hidden; width:110px; height:65px;" allowTransparency="true"></iframe>

Une solution imparfaite, mais il fonctionne.

Travaillé comme un charme après beaucoup de frustration.

InformationsquelleAutor Gezim

7

Il semble que, dès aujourd'hui, au moins, que le problème vient d'un étrange alignement de la <span> balise javascript génère au sein de la .fb-share-button <div>. Voici mon fix:
```
.fb-share-button span {
   top: -6px;
}
```
- À compter du 20 Novembre 2014 c'est la seule solution que j'ai pu obtenir de travailler.
- en haut: -7px; il l'a fait pour moi, merci beaucoup 🙂
InformationsquelleAutor StevenClontz
3

Je me rends compte que cette question a été posté il y a quelques temps, mais voici la solution que j'utilise.
```
.twitter-share-button {
      position:relative;
      top:6px;
      }
```
InformationsquelleAutor Digital Robot Gorilla
2

Vous pouvez facilement résoudre ce problème avec le CSS:

iframe { float: left; padding-right: 10px; }

EIDT: Si vous voulez être centré, il suffit de les envelopper dans un div (qui elles ne le sont déjà enveloppé avec, donner au div de classe ou un ID). Par exemple, nous allons lui donner une classe de twfb pour twitter/facebook. Maintenant, dans le CSS, nous allons déclarer une largeur et automatique des marges de la manière suivante:

.twfb { width: 120px; margin: 0 auto; }

EDIT 2: Pour supprimer la grande marge de son facebook, il suffit d'ajouter ceci dans votre CSS:

.fb_edge_widget_with_comment { margin-left: -26ppx; }

Que devrait aligner agréable et à proximité les uns des autres.

Qui devrait le faire!

Bonne chance
- Vous pourriez être plus précis avec l'iframe par l'ajout de sa classe, mais j'espère que vous n'avez pas que beaucoup iframes là...
- Merci pour la réponse. Je veux un de ces boutons pour être centré à l'intérieur d'un div -- votre solution peut être adaptée à cela?
- bien sûr! Je vais modifier ma réponse maintenant
- Merci. Voici ce que j'ai obtenu après avoir joué avec les flottants: ro-che.info/ccc/11.html. Toujours pas exactement ce que je voulais (les boutons semblent être aligné par le haut plutôt que de la face inférieure), mais ce qui me dérange plus c'est un grand espace avant le facebook bouton. Comment puis-je me débarrasser de lui? Aussi, pouvez-vous m'expliquer (ou me pointer à une explication) pourquoi flottant aide ici?
- Aussi, je viens de vérifier dans Konqueror -- le texte commence à la droite des boutons plutôt qu'au-dessous d'eux. Comment résoudre ce problème?
- Veuillez vérifier EIDT2 pour le facebook de l'espace correctif.
- aussi des accessoires sur le comique de la bande dessinée. J'ai joui de!
InformationsquelleAutor Amit
2

Cela a fonctionné pour moi comme un charme:
```
.twitter-share-button[style] { vertical-align: middle !important; }
```
InformationsquelleAutor andres.arslanian
1

Je ne peux pas vous dire ce qu'il se passe là-bas et je ne veux même pas penser à ce < fb:headache > - t-il, mais vous devriez être capable de résoudre ce problème en faisant flotter l'iframe pour le twitter bouton gauche et en ajoutant une marge à droite pour obtenir le look original de retour.
```
iframe.twitter-share-button { float: left; margin-right: 4px; }
```
C'est un peu hackish, mais ils doivent le faire.

Mise à JOUR
```
.fb_iframe_widget { display: block !important; } 
//leave important away if possible!

//change main.css /line 41:
div.text {
    clear: left;
    margin: 0 auto;
    padding: 35pt 5pt 15pt;
    width: 40em;
}
```
- Merci pour la réponse. Je veux un de ces boutons pour être centré à l'intérieur d'un div -- votre solution peut être adaptée à cela?
- Eh bien, je suppose que vous devriez avoir une autre div en enveloppant les boutons, juste assez large pour s'adapter à tous les deux et ensuite utiliser margin: 0 auto au centre de ce div sein du div parent.
- Merci. Voici ce que j'ai obtenu après avoir joué avec les flottants: ro-che.info/ccc/11.html. Toujours pas exactement ce que je voulais (les boutons semblent être aligné par le haut plutôt que de la face inférieure), mais ce qui me dérange plus c'est un grand espace avant le facebook bouton. Comment puis-je me débarrasser de lui? Aussi, pouvez-vous m'expliquer (ou me pointer à une explication) pourquoi flottant aide ici?
- Aussi, je viens de vérifier dans Konqueror -- le texte commence à la droite des boutons plutôt qu'au-dessous d'eux. Comment résoudre ce problème?
- Vérifier mes mises à jour. Les éléments ont une taille différente, ce qui rend impossible d'aligner la fois en haut et en bas. Je voudrais le modifier, en utilisant par exemple des marges en fonction de vos besoins.
InformationsquelleAutor polarblau
1

Le problème ici n'est pas la position, la hauteur ou de tout autre CSS, mais plutôt le inline-block éléments en prenant le mauvais alignement vertical. Le facebook de l'élément est vertial-align: top et le twitter de l'élément vertical-align: bottom. Peuvent tous être résolus avec une seule ligne de CSS, mais pour utiliser le bon sélecteur et !importantoverride JS appliqué des styles en ligne.
```
iframe[style] { /* to select the outer-most element of the twitter button */
    display: inline-block;
    vertical-align: bottom !important;
} 
```
InformationsquelleAutor DMTintner
1
```
.fb_iframe_widget {
  span {
   vertical-align: initial !important;
  }
}
```
a fonctionné pour moi
- Pouvez-vous expliquer pourquoi ça marche?
- Quand je suis venu avec la solution que j'ai été juste à bidouiller.. mais 'initiale' est essentiellement la valeur par défaut de la base de référence pour le vertical-align propriété. @nicorellius la réponse explique FB a été en utilisant vertical-align: bottom pour les extensions.
- CSS ne permet pas imbriquée entre parenthèses, n'est ce pas? Cela fonctionne pour moi: fb_iframe_widget span { vertical-align: initial !important; }
- désolé je l'ai écrit en scss. La syntaxe css est ce que @Mark est.
InformationsquelleAutor Raymond Ma
1

Twitter et facebook bouton peut être fixé verticalement alignés
```
 vertical-align: top !important;
```
InformationsquelleAutor Pan Bouradas
0

Je sais qu'il y a eu beaucoup de réponses, mais depuis que j'ai eu du mal avec cela et pas ici a fonctionné pour moi, je pensais que je voudrais ajouter mes 2 cents... Comme il a été mentionné, la span a un vertical-align: bottom; et vous avez besoin de remplacer cette. Je dois dire, même si cela va à l'encontre CSS théorie, il serait vraiment bien si vous pouviez simplement "désactiver" une règle CSS comme celui-ci. Je veux dire, ce que l'enfer FB? Les icônes à travailler un seul jour, mais pas le suivant. C'est la chose la plus stupide que j'ai jamais entendu parler, jamais.

De toute façon...
```
.fb-like span {
    /* baseline is default, so it negates bottom*/
    vertical-align: baseline !important;
}
```
...il l'a fait pour moi.

InformationsquelleAutor nicorellius
0

Puis revenir à la première solution, un peu.

"top" est également ok.

C'est ma solution pour le plugin joomla (voir http://www.compago.it/software/41-compago-software/347-facebook-twitter-google1-plugin-for-joomla.html):
```
.fb_iframe_widget span {
vertical-align: top !important;
}
```
InformationsquelleAutor Klas Wirholm
0

J'ai résolu ce problème en prenant Guðmundur Þór Magnússon's réponse et l'ajout de margin-bottom: -2px !important; à la règle CSS:
```
.twitter-share-button[style] {
    vertical-align: text-bottom !important;
    margin-bottom: -2px !important;
}
```
InformationsquelleAutor Adam Denoon
0

Utiliser ce code pour le faire fonctionner, reportez-vous à la vertical-align partie. Modifier le numéro en conséquence (Actuel est de 7):
```
<div class="fb-like" data-width="30" data-layout="button" data-action="like" data-show-faces="false" data-share="true" style="vertical-align:7px"></div>
```
InformationsquelleAutor Benjamin Alexander Cai
0

Que je n'ai fait ajouter le CSS de ma page:
```
div.fb_iframe_widget > span {
    vertical-align: unset !important;
}
```
C'est un peu moins opiniâtres que certaines des réponses ici et isole le changement à seulement annuler le réglage de la hauteur sur le Facebook icône de partage.

InformationsquelleAutor digitalfoo

Vous devez vous connecter pour publier un commentaire.