2

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>中，但推文出现在左侧对齐。如何在任何页面中水平居中？

4

4 回答 4

6

我遇到了同样的问题，唯一对我有用的解决方案是改变班级

前

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

后

<blockquote class="twitter-tweet tw-align-center" data-lang="en">
于 2016-12-11T19:06:36.753 回答
2

如果您使用来自 Twitter 的嵌入代码，那么真正有效的是将类tw-align-center添加到blockquote标签中，如 Panayiotis Georgiou 所示。

但是，在我的基于Octopress的博客中，我使用了Jekyll 插件并且不能直接使用 HTML。另外，我不想单独摸索每条嵌入的推文。

因此，我在我的 CSS 中添加了以下内容：

.twitter-tweet {
   margin: auto;
}

这适用于整个网站，通过嵌入代码直接添加推文，也适用于插件嵌入的推文。

（通过：SpectrumZ）

于 2017-03-09T19:22:31.320 回答
1 
<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>
于 2013-06-25T05:32:24.040 回答
1

试穿text-align:center;_<p>

例如：

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

或者如果您希望整个块居中，您可以将 atext-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>

这是两者的工作解决方案

希望这可以帮助。

于 2013-06-25T05:27:42.503 回答