Can't Center Twitter Follow Button and Some Text Cut Out

Question

I'm getting some peculiar behavior on my twitter follow button. It doesn't seem to center and some text is cut out (text should be 'Follow @HackerUofT' but it only shows 'Follow'). Link 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>

When I inspect element on Chrome and change the center to a div it seems to fix everything but when I actually edit the code to a div it doesn't work.

Answer 1

Got the culprit. When I inspect your code, the show-screen-name attribute was set to false.

Just add data-show-screen-name="true" to your <a href> line as shown below.

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

Nothing else to change.

Cheers!!!

Answer 2

Add text-align cetner in social media class

.social_media
{
    text-align:center
}

http://jsfiddle.net/CsETG/

Answer 3

Don't use ceneter tag as it will be removed in html5 standarts. Use 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>