Как центрировать твит?

Question

Twitter предоставляет код для встраивания твита. Например у меня есть:

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

Я попытался заключить вышеуказанный код в тег <div style="margin:auto">...</div> но твит кажется выровненным слева. Как отцентрировать его по горизонтали на любой странице?

Answer 1

Я столкнулся с той же самой проблемой, и единственное решение, работавшее для меня, было, чтобы изменить класс

До

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

После

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

Answer 2

Что действительно работает, если вы используете код для вставки из Twitter, так это добавление класса tw-align-center к blockquote тег как показано Panayiotis Georgiou.

Тем не менее, в моем блоге на основе Octopress я использую плагин Jekyll и не могу работать напрямую с HTML. Кроме того, я не хочу возиться с каждым встроенным твитом отдельно.

Поэтому я добавил следующее в мой CSS:

.twitter-tweet {
   margin: auto;
}

Это работает глобально для всего сайта с твитами, добавленными непосредственно через код для встраивания, а также для твитов, встроенных в плагин.

(через: SpectrumZ)

Answer 3

Пытаться text-align:center; на <p>

Например:

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

или если вы хотите, чтобы весь блок был в центре, вы можете применить text-align:center; к <blockquote>

Например:

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

Вот РАБОЧЕЕ РЕШЕНИЕ ДЛЯ ОБА

Надеюсь это поможет.

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