How to Center a Twitter Embed in Your WordPress Post

twitter embed

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, lets say I use the following URL:

https://twitter.com/brianleejackson/status/791476709363023872

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

The first option you have to use some global CSS styles so that you never have to worry about that again. Insert the following code into your theme’s custom CSS box or you can use a free Custom CSS plugin.

.twitter-tweet {margin:auto;}

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

Step 2

Copy the code and paste it into your WordPress post. Make sure you are in the “text” mode, not visual mode.

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.

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

GET MORE STUFF LIKE THIS

Marketing, WordPress, Blogging Tips, SEO and Reviews, once a week.

Thank you for subscribing.

Something went wrong.

2 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.

Leave a Comment

39 Shares
Tweet
Share
Share
Buffer