The Robservatory

Robservations on everything…

 

Center embedded tweets on WordPress sites

WordPress has a neat built-in feature that, when composing a post, if you put the URL to a specific tweet on its own line, like this…

https://twitter.com/rgriff/status/827901296258584576

…then WordPress will automatically convert it to a tweet link, like this:

By default, though, the embedded tweets will be left-aligned. I wanted them center aligned, as above. And because I just wasted 15 minutes figuring this out, I’m documenting the solution here to save myself future aggravations…

I thought a center align would be as simple as wrapping the tweet URL line in a center-aligned div, but that doesn’t work. So I searched the web and found pages of results. After trying and failing with many of those solutions, I finally got smart and looked at the source code…should’ve done that first.

Embedded tweets—at least as of 4.7.2—are assigned to a class named twitter-tweet. So to center all embedded tweets, you just need to add a simple class definition to your theme’s CSS:

/* Center the damn tweets */
.twitter-tweet {
    margin: 0 auto !important;
}

Note: The aggravated tone in the style comment is completely optional.

9 Comments

Add a Comment
  1. Any idea why this won’t work on Safari? I’ve tried various permutations and they all work in Chrome, but none are working in Safara where the Tweets remain aligned left.
    thanks!

        1. In viewing the source, I don’t see that the margin: 0 auto CSS has been applied. If I add that in in the source editor, the tweet is centered.

          -rob.

          1. I’ve tried different variations of the code. I just changed it to this:
            }
            /* center twitter object*/
            twitterwidget {
            margin:0 auto
            } !important;
            width: 100% !important;
            min-width: 320px !important;
            max-width: 320px !important;
            }
            It’s still not centering in my version of Safari Version 10.0.3 (11602.4.8.0.1), but is in Chrome

  2. Willy – You need to apply it to the twitter-tweet class, as shown in the post. Just add the class as shown (or without the !important should also work) to your CSS, and it should work fine.

    -rob.

Leave a Reply

The Robservatory © 2018 • Privacy Policy Built from the Frontier theme