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?

回答1:

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">

回答2:

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)

回答3:

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.

回答4:

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

来源：https://stackoverflow.com/questions/17289753/how-to-center-a-tweet

标签

html

css

tweets