How to center a Twitter embed in your WordPress post

Earlier I wrote about how to center a YouTube embed. Today I want to share with you a quick little trick on how to center a Twitter embed in your WordPress post.

How to center Twitter embed

WordPress has an auto-embed feature which means it will convert a Twitter URL automatically and display the embed for you. For example, let’s say I use the following URL:

https://twitter.com/novashareio/status/1257408466328489984

WordPress automatically converts the above URL into what you see below. By default though, almost no WordPress themes have styles or CSS for Twitter embeds. So by default, they are left-aligned. This might not be a big deal for some people, but if you are centering your images, left-aligned Tweets just look weird.

Check out some options you have below on how to center them.

  1. Center Twitter embed globally in your WordPress theme
  2. Center Twitter embed manually

1. Center Twitter embed globally in your WordPress theme

The first option you have to use a global CSS style so that you never have to worry about that again. Use the following code:

.twitter-tweet {margin:auto;}

The easiest way to add this is under “Additional CSS.” Go to “Appearance → Customize” in your WordPress dashboard. Then paste the above code and click “Publish.”

WordPress Additional CSS
WordPress Additional CSS

And now the auto-embedded tweet and all future ones will be centered. That was easy!

2. Center Twitter embed manually

The second option you have to use an inline CSS style. Did you know that Twitter actually has a style already for centering Twitter embeds?

Step 1

On Twitter, click on “Embed Tweet” to grab the code.

Click embed Tweet
Click embed Tweet

Step 2

Copy the code and paste it into your WordPress post. Make sure you are in the “text” mode, not visual mode. If you are using the WordPress Block Editor (Gutenberg), just make sure to add the embed as an HTML block.

Step 3

You then need to edit the code and append Twitter’s style to it. On the first line of the embed code, change the following:

<blockquote class="twitter-tweet" data-lang="en">

To this:

<blockquote class="twitter-tweet tw-align-center" data-lang="en">

And your done! Your embedded tweet is now centered.

Summary

Have any questions about centering a Tweet embed on your WordPress site? If so, drop them below.

Brian Jackson

I craft actionable content and develop performance-driven WordPress plugins. Connect on Twitter or subscribe to my newsletter (twice a month, no spam).

6 thoughts on “How to center a Twitter embed in your WordPress post”

  1. Brian, this is what I’m looking for. For a simple css code, the embed tweets automatically center on the content post. Thanks for sharing this.

    Reply
  2. Alot of people wrote shit codes, but yours was awesome. A simple css code center all my embed tweets. Works for me, works perfectly…….. Thank you so much i love it

    Reply
  3. When I use the embed code instead of showing it like Twitter embed my theme is converting the embed code into blockquote.

    Reply
    • Hey Narendra,
      I’ve updated the post above. If you are using the WordPress Block Editor (Gutenberg), you can simply add the embed code as an HTML block. That should fix your problem.

      Reply

Leave a Comment

2