无法居中推特关注按钮和一些文字被剪掉

Question

我的推特关注按钮上出现了一些奇怪的行为。它似乎没有居中，并且一些文本被剪掉了（文本应该是"关注@HackerUofT"，但它只显示"关注"）。链接 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

不要使用 ceneter 标签，因为它将在 html5 标准中删除。使用文本对齐方式。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

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

.social_media
{
    text-align:center
}

http://jsfiddle.net/CsETG/