Question

今天很简单的问题。我如何定位推特小部件？我希望它在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;
}

使用css代码twitter供应似乎没有什么区别，因为当值发生变化时，实际上没有任何变化。我试过嵌入一种风格＆＃34;＆＃34;在A标签中也尝试添加一个类。

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

谢谢！

Answer 1

要使窗口小部件居中，请添加

    text-align: center;

到你的CSS。

Demo here

或使用flexbox进行垂直和水平居中：

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类设置在页面上的iframe元素推特的JS代码中。

这是我的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 -->`

text-center div上的col类可确保在窗口小部件本身无法加载/渲染时窗口小部件文本居中。另请注意，我没有使用任何类型的wrapper课程。

这是我在Chrome中加载/呈现后的HTML ：

<div class="row"> <div class="col-md-12 col-sm-12 col-xs-12 text-center">  <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>  </div>  </div> `

请注意上述CSS中的twitter-timeline-rendered课程margin: auto;。

Answer 4

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

如何定位推特小部件

4 个答案: