How to Center Align Your Embedded Tweets [Quick Tip]

We love us some embedded tweets. They're a great way to give your content a little pizzazz, and they help to enhance engagement with it, too -- among other use cases. But a couple of months ago when we went to embed a tweet into one of our blog articles, we noticed that Twitter no longer included an out-of-the-box option to specify the alignment of embedded tweets like it used to. And since then, every time we've gone to embed a tweet, we've had to look up time and time again just how to center them in our content. Four words: Pain. In. The. Butt.

Because we figured this might be irking some of you, too, we thought we'd pull together a quick tutorial so you never have to Google it again. Bookmark this article to reference the next time you get frustrated about how silly and unprofessional that left-aligned tweet on your blog post or web page looks.

How to Center Align Your Embedded Tweets 

Step 1: Generate the Tweet's Standard Embed Code

For the tweet you want to embed, click More and select Embed Tweet.

Step 2: Copy the Embed Code

Next, copy the standard embed code Twitter generates for you. 

The full embed code will look something like this:

<blockquote class="twitter-tweet"><p>These 101 companies are totally ROCKING social media: <a href="http://t.co/d0ZQR5C5ar" title="http://hub.am/YZZGgu">hub.am/YZZGgu</a> Wouldn't you say?</p>&mdash; HubSpot (@HubSpot) <a href="https://twitter.com/HubSpot/status/312028320004980736">March 14, 2013</a></blockquote>
<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script> 

Step 3: Paste This Code Into Your Website's HTML

Wherever you want your embedded tweet to appear, paste this code into the HTML of your website. If you kept all of Twitter's default options, this is how your embedded tweet would look on the page. 

These 101 companies are totally ROCKING social media: hub.am/YZZGgu Wouldn't you say?

— HubSpot (@HubSpot) March 14, 2013

Now wouldn't it be nice if this tweet was centered on the page?

Step 4: Center Your Embedded Tweet

1. In the HTML, do a Ctrl F search for twitter-tweet to find your embedded tweet
2. Find the first row of the embedded tweet, where it reads <blockquote class="twitter-tweet">
3. Insert tw-align-center after twitter-tweet, and be sure to include a space after the word tweet 

The final product will read: <blockquote class="twitter-tweet tw-align-center">

Final Code for the Centered Embedded Tweet:

<blockquote class="twitter-tweet tw-align-center"><p>These 101 companies are totally ROCKING social media: <a href="http://t.co/d0ZQR5C5ar" title="http://hub.am/YZZGgu">hub.am/YZZGgu</a> Wouldn't you say?</p>&mdash; HubSpot (@HubSpot) <a href="https://twitter.com/HubSpot/status/312028320004980736">March 14, 2013</a></blockquote>
<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>  

And here's how it will look on your page:

These 101 companies are totally ROCKING social media: hub.am/YZZGgu Wouldn't you say?

— HubSpot (@HubSpot) March 14, 2013

Voila! Beautiful, and easy as pie :)

To learn about how to further customize your embedded tweets by changing their default theme, color, width, or height, check out Twitter's helpful guide here. And for more ideas about how to use embedded tweets in your marketing, check out this post.

Image Credit: BeauGiles