CODEWITHSUNDEEP
htmlcsstweets
tic
tic

Reputation: 4199

how to center a tweet?

Twitter provides the code to embed a tweet. For example I have:

<blockquote class="twitter-tweet"><p>NoSQL space gradually becoming SlowSQL space.</p>&mdash; Big Data Borat (@BigDataBorat) <a href="https://twitter.com/BigDataBorat/statuses/349216251853287425">June 24, 2013</a></blockquote>
<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>

I have tried to enclose the above code into a tag <div style="margin:auto">...</div> but the tweet appears yet aligned on the left. How to center it horizontally in a whatever page?

Upvotes: 2

Views: 17665

Answers (4)

Dennis Wegner
Dennis Wegner

Reputation: 91

What really works if you are using the embed-code from Twitter is the addition of the class tw-align-center to the blockquote tag as shown by Panayiotis Georgiou.

However, in my Octopress-based blog I use a Jekyll-plugin and can't work directly with the HTML. Also, I don't want to fumble around with each and every embedded tweet separately.

Therefore I added the following to my CSS:

.twitter-tweet {
   margin: auto;
}

This works globally for the whole site with tweets added directly via the embed code and also for the tweets embedded by the plugin.

(via: SpectrumZ)

Upvotes: 2

Panayiotis Georgiou
Panayiotis Georgiou

Reputation: 1263

I came across the same issue and the only solution worked for me was to change the class

Before

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

After

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

Upvotes: 6

Nitesh
Nitesh

Reputation: 15769

Try text-align:center; on the <p>

For Instance:

<p style="text-align:center;">NoSQL space gradually becoming SlowSQL space.</p>

or if you want the whole block to be center, you can apply a text-align:center; to the <blockquote>

For Instance:

<blockquote class="twitter-tweet" style="text-align:center;"><p>NoSQL space gradually becoming SlowSQL space.</p>&mdash; Big Data Borat (@BigDataBorat) <a href="https://twitter.com/BigDataBorat/statuses/349216251853287425">June 24, 2013</a></blockquote>

Here is the WORKING SOLUTION FOR BOTH

Hope this helps.

Upvotes: 1

Swapnil
Swapnil

Reputation: 616

<div style='width:100%'>
    <div style='width:50%;margin:0px auto'> 
        <blockquote class="twitter-tweet"><p>NoSQL space gradually becoming SlowSQL space.</p>&mdash; Big Data Borat (@BigDataBorat) <a href="https://twitter.com/BigDataBorat/statuses/349216251853287425">June 24, 2013</a></blockquote>
    </div>
</div>

Upvotes: 1

Related Questions