WordPress Business Solutions

HIRE A WORDPRESS TECHNICIAN & WEBSITE DESIGNER

Contact Us
photodune-5432948-blue-bird-using-computer-s

Why is my embedded Tweet not centered?

Every now and then I get emails from WordPress users asking me: Why is my embedded tweet not centered and aligned left, no matter what I try?, so I decided to write the following “How-to”.

The easiest way to explain this problem would be because the Twitter script behind the embed code DOES overwrite all of your own CSS or WYSIWYG commands or attempts to center align the Tweet on your page.

1) Here’s an embedded Tweet using the Twitter embed code. You will see, it is unfortunately aligned on the left side of the page:


<blockquote class=”twitter-tweet” lang=”en”>
<p dir=”ltr” lang=”en”>The good weather umbrella by John Wilhelm is a photoholic <a href=”https://t.co/sABcyJp1rV”>https://t.co/sABcyJp1rV</a> <a href=”https://twitter.com/hashtag/photography?src=hash”>#photography</a> <a href=”https://twitter.com/500px”>@500px</a> <a href=”https://t.co/yHNS0OpWBO”>pic.twitter.com/yHNS0OpWBO</a></p>
— kuchiFm Fotos (@hacerfotos) <a href=”https://twitter.com/hacerfotos/status/689348319701696512″>January 19, 2016</a></blockquote><script src=”//platform.twitter.com/widgets.js” async=”” charset=”utf-8″></script>


 
And the result is… always aligned left.

 

2) Now I will show you how to center the Tweet in the middle of the page. To do this, you will need to edit the embed code and add the “tw-align-center” command to the code’s class tag. Just like in this example…


<blockquote class=”twitter-tweet tw-align-center” lang=”en”>
<p dir=”ltr” lang=”en”>The good weather umbrella by John Wilhelm is a photoholic <a href=”https://t.co/sABcyJp1rV”>https://t.co/sABcyJp1rV</a> <a href=”https://twitter.com/hashtag/photography?src=hash”>#photography</a> <a href=”https://twitter.com/500px”>@500px</a> <a href=”https://t.co/yHNS0OpWBO”>pic.twitter.com/yHNS0OpWBO</a></p>
— kuchiFm Fotos (@hacerfotos) <a href=”https://twitter.com/hacerfotos/status/689348319701696512″>January 19, 2016</a></blockquote><script src=”//platform.twitter.com/widgets.js” async=”” charset=”utf-8″></script>


  
And then voila… it is now centered.

3) Now if you want a permanent solution to this problem, just get in contact with us. We will then add a custom-made php code to your website that will automatically center the alignment of all future tweets you may embed.

Wait, there’s more… with our solution, you won’t need to copy/paste the embed code anymore, it will be more simple. All you will need to do is to add the tweet’s address like this one…

(ex. https://twitter.com/hacerfotos/status/688861902001311744)

…and the result will be professional centered tweets, just like this one.

Contact us for more details.



Share this page:
Facebooktwittergoogle_plusredditlinkedinFacebooktwittergoogle_plusredditlinkedin