如何定位推特小部件

Question

今天的简单问题。如何定位 twitter 小部件？我希望它在 div 内水平和垂直居中。代码如下：

<div class="twitterborder">

<a class="twitter-timeline tw-align-center" href="https://twitter.com/twitterapi" data-widget-id="591646755353186304" width="150px">Tweets by @twitterapi</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>

</div>

.twitterborder {
width:27.5%;
height:300px;
margin-top:3px;
margin-right:5%;
float:right;
background:#707070;
}

使用 twitter 提供的 css 代码似乎没有什么不同，因为当值发生变化时，实际上没有任何变化。我已经尝试在 A 标记中嵌入样式“”，还尝试添加一个类。

它目前看起来像这样（如果图像不起作用，请道歉，这里有点新）：
Image should be here http://gyazo.com/b96dcc6f03ef8b42dc654ad9fd832a50

谢谢！

Answer 1

要使小部件居中，请添加

    text-align: center;

到你的CSS。

Demo here.

---

或者使用 flexboxes 垂直和水平居中：

display: flex;
flex-direction: column;
justify-content: center;
align-items: center;

Demo here.

Answer 2

看看这个解决方案：link

CSS：

.table{
    display:table;
    height: 100%;
    width: 100%;
}
.table-cell{
    display:table-cell;
    vertical-align: middle;
}

HTML：

<div class="twitterborder">
    <div class="table">
        <div class="table-cell">
<a class="twitter-timeline tw-align-center" href="https://twitter.com/twitterapi" data-widget-id="591646755353186304" width="150px">Tweets by @twitterapi</a>

    <script>
        ! function(d, s, id) {
            var js, fjs = d.getElementsByTagName(s)[0],
                p = /^http:/.test(d.location) ? 'http' : 'https';
            if (!d.getElementById(id)) {
                js = d.createElement(s);
                js.id = id;
                js.src = p + "://platform.twitter.com/widgets.js";
                fjs.parentNode.insertBefore(js, fjs);
            }
        }(document, "script", "twitter-wjs");
    </script>
        </div>
    </div>
</div>

Answer 3

这篇文章中的所有解决方案都不会以我的小部件为中心（也许我有 CSS 订单问题......或者我的自定义容器配置......谁知道！？）

但是，这个 CSS 解决方案确实有效：

.twitter-timeline-rendered {
    margin: auto;
}

.twitter-timeline-rendered 类设置在 Twitter 的 JS 代码插入到您的页面的 iframe 元素上。

这是我的 HTML 源代码：

<div class="row">
    <div class="col-md-12 col-sm-12 col-xs-12 text-center">
        <!--Twitter client start-->
        <a class="twitter-timeline" data-dnt="true" data-chrome="noborders noscrollbar nofooter" href="https://twitter.com/yourTwitterAccount" data-widget-id="yourTwitterWidgetID">Tweets by @yourTwitterAccount</a>
        <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
        <!--Twitter client end-->
    </div> <!-- /.col -->
</div> <!-- /.row -->`

col div 上的 text-center 类可确保在小部件本身未加载/呈现时小部件文本居中。另请注意，我不使用任何类型的 wrapper 类。

这是我在 Chrome 中加载/渲染后的 HTML ：

<div class="row">
    <div class="col-md-12 col-sm-12 col-xs-12 text-center">
        <!--Twitter client start-->
        <iframe id="twitter-widget-iyourTwitterWidget" scrolling="no" frameborder="0" allowtransparency="true" class="twitter-timeline twitter-timeline-rendered" allowfullscreen="true" style="position: static; visibility: visible; width: 520px; height: 370px; padding: 0px; border: none; display: block; min-width: 180px; max-width: 100%; min-height: 200px; margin-top: 0px; margin-bottom: 0px;" data-widget-id="yourTwitterWidgetID" data-user-id="yourTwitterUserID" title="Twitter Timeline"></iframe>
        <!--Twitter client end-->
    </div> <!-- /.col -->
</div> <!-- /.row -->`

注意 twitter-timeline-rendered 类，它继承了上面 CSS 中的 margin: auto;。

Answer 4

为此添加 data-align="center" 到 a 标签