Question

我的推特按钮上有一些奇怪的行为。它似乎没有居中，一些文字被剪掉（文字应该是'Follow @HackerUofT'，但它只显示'Follow'）。链接http://hacker-universityoftoronto.appspot.com/

<center class="social_media">
    <a href="https://twitter.com/HackerUofT" class="twitter-follow-button" data-show-count="false">Follow @HackerUofT</a>
    <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
</center>

当我检查Chrome上的元素并将中心更改为div时，它似乎可以修复所有内容，但是当我实际编辑代码到div时它不起作用。

Answer 1

不要使用中心标记，因为它将在html5标准中删除。使用text-align。 http://jsfiddle.net/6f5aL/

<div style="text-align:center">
    <a href="https://twitter.com/HackerUofT" class="twitter-follow-button" data-show-count="false">Follow @HackerUofT</a>
    <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
</div>

Answer 2

罪魁祸首。检查代码时，show-screen-name属性设置为false。

只需将data-show-screen-name="true"添加到您的<a href>行，如下所示。

<a href="https://twitter.com/HackerUofT" class="twitter-follow-button" data-show-count="false" data-show-screen-name="true">Follow @HackerUofT</a>

别无其他改变。

干杯!!!

Answer 3

在社交媒体类中添加文本对齐中心

.social_media
{
    text-align:center
}

http://jsfiddle.net/CsETG/

无法中心Twitter关注按钮和一些文本剪切

3 个答案: