Center Aligning Tweets Embedded With WordPress Auto-Embed (Also Works Universally on Any Site)

Google ‘center embedded tweet‘ and you’ll find several helpful sites explaining how to modify the embed code for a tweet by adding a predefined twitter style (tw-align-center) to the <blockquote> tag in the tweet’s embed code (i.e., change <blockquote class=”twitter-tweet”> to <blockquote class=”twitter-tweet tw-align-center”>).

However, if you use the quick method WordPress provides for embedding tweets (simply pasting the tweet’s url into a post) you cannot edit the embed code (because you are only pasting in the url, not the embed code).

But you can automatically center all tweets site-wide automatically (whether they are embedded via WordPress’s quick method or via pasting unedited embed code).  Simply add the following line to the appropriate css file for your site:

.twitter-tweet {margin: auto;}

Or put it inside a <style> tag in the optional <head> code if your theme supports something like that:

<style type=”text/css>
    .twitter-tweet {margin: auto;}
</style>

Note that the above css code produces essentially the same result as adding tw-align-center to the embed code.  The script in the embed code produces an <iframe> tag in the resultant html displayed by a web browser.  Adding tw-align-center as a style in the blockquote tag causes Twitter’s script to add a ‘margin:auto;’ attribute to the inline style of the resultant iframe tag.

But ‘twitter-tweet’ is also defined as a class in the iframe tag, which makes it possible to apply margin:auto to the iframe tag by adding the above code to a .css file, so that all embedded tweets are automatically centered, even when using WordPress’s quick embed feature, as I am doing below:

Note that the tweet may not be centered in your edit window (depending on how well your theme pays attention to matching published styles withing the edit window), but it should be centered in the published post.

Dec 31 2014  WordPress
Converting a WordPress database to run under a different domain name

The Author

Don Alejandro

Don is a renegade physicist who manages websites for several WV groups from an undisclosed location in the woods near Spencer, WV…

Leave a Reply

Your email address will not be published. Required fields are marked *

Going Solar © 2015

Send this to a friend