html - 试图在网页的正中间获取 Twitter Feed

Question

我试图让我的 Twitter 提要位于网页的正中间，不幸的是我不知道为什么，但它一直在网页的顶部。

有人帮我解决这个问题吗？

问题位于:http://www.falconesports.club/news.html

CSS:

.twitter-timeline {    
 position: fixed;
 margin-top: 50%;
 margin-left: 50%;
 margin-right: 50%;
}         

Answer 1

有很多方法可以做到这一点，但我最喜欢的是使用 flexbox，因为它不仅可以水平居中，还可以垂直居中。

这里有一个关于 flexboxes 的很​​好的教程:https://css-tricks.com/snippets/css/a-guide-to-flexbox/

在您的情况下，要完成这项工作，您需要将这些样式应用于这两个类。

.fadein.two {
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    align-content: center;
}

.twitter-timeline {
    /* position: fixed; */
    /* left: 50%; */
    /* margin-top: 100px; */
    /* margin-left: 600px; */
    margin: auto;
}

取消所有内联和通过 .twitter-timeline 类应用到 iframe 的边距，同时移除 left: 50% 并只留下 margin: auto。