Have you ever wondered how to center align embedded tweets?
The ability to embed tweets has never been easier.
Before, you had to get pretty crafty to try and embed a tweet on your website. But Twitter has made it as easy as a click, copy and paste. However, if you’re really focused on making your website content clean and organized, many of you would like to ‘center’ those embeds in your post. You don’t have to add any CSS code in your theme (although you can do that to save a lot of time in the future). All you need to do is add some code.
Just add this code to your embedded code:
Lets take a look at how the embed functions in the first place. First off, to embed a tweet to begin with you have to do the following:
- Head to the Twitter profile you want to get the embed code from (in this case we go to @Tweet_Brander)
- Find the tweet you want to embed, hover over it and hover over the word MORE.
- Click on EMBED TWEET.
You’ll see a box like this open up:
Simply copy the code in the blue-lined box. That is your embed code. Once you’ve copied it, head back to your content window and be sure to paste it in on the TEXT window, not the VISUAL bar if you are using WordPress. You want to enter this on the code-side, not your visual editing side. Once you’ve found the spot you want the embedded tweet, paste in the code. Update your post (or Publish it). You should see the tweet look like this:
Today is a good day for center-aligning #Twitter embeds.
— Tweet Brander (@tweet_brander) September 30, 2013
But remember, you wanted to learn how to center align embedded tweets. So here is where you add in the extra snippet of code. In the end, your embedded tweet should look like this:
Today is a good day for center-aligning #Twitter embeds.
— Tweet Brander (@tweet_brander) September 30, 2013
Here’s to making great content and centered tweet embeds! Enjoy. Let us know if you have any formatting and styling tips in the comments below.
[…] How to center align embedded tweets, Josh Benson […]
WordPress provides for a more comfortable way to embed tweets, unfortunately, in that case you don’t get to see the blockquote element in your text editor, so you cannot add an extra class to your html.
So, how about that?
If you want to automatically center all embedded tweets on your website, simply add the following to the css code for your site:
.twitter-tweet {
margin:auto;
}
it works fine in a simple tweet, but it doesnt work when the tweet have a picture