Question

有人能说明为什么Chrome（版本78.0.3904.97）不尊重flexbox css将Twitter时间轴放在网页中心的问题吗？

使用Twitter生成的代码将Twitter时间轴嵌入到网页中，我发现在Chrome中证明无法将时间轴居中。在Safari中可以正常工作。

Safari screenshot showing the Twitter timeline centered in the twt class div Chrome screenshot showing the Twitter timeline left-aligned in the twt class div

/* html snippet */

<div class="twt">

   <a class="twitter-timeline" data-width="640" data-height="860" href="https://twitter.com/PremierLake?ref_src=twsrc%5Etfw">Tweets by PremierLake</a> 
    <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

</div>

/* flexbox css */

.twt {
  display: flex; 
  flex-direction: column;
  align-items: center;
  justify-content: center;
  align-content: stretch;
  width: 100%;
  height: 860px;
}

注意：我尝试过非flexbox的传统定位。我不想使用绝对定位，因为div结构需要与页面上的周围元素一起流动。我已经抓取了Twitter开发者说明，但它们无法提供以时间轴为中心的方法。这与封装的单个tweet不同，后者可以居中。 Twitter时间轴是来自单个Twitter feed的一系列推文。

Answer 1

我没有得到答案，但是我尝试了您的代码。对我来说很好！

尝试检查chrome中的元素，看看实际应用了哪些样式。

除了突出显示背景外，我没有更改您的代码。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <style>
      /* flexbox css */

      .twt {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        align-content: stretch;
        width: 100%;
        height: 860px;
        background: yellow;
      }
    </style>
  </head>
  <body>
    <h1>blalbalbalb</h1>
    <div class="twt">
      <a
        class="twitter-timeline"
        data-width="640"
        data-height="860"
        href="https://twitter.com/PremierLake?ref_src=twsrc%5Etfw"
        >Tweets by PremierLake</a
      >
      <script
        async
        src="https://platform.twitter.com/widgets.js"
        charset="utf-8"
      ></script>
    </div>
  </body>
</html>

] 2] 2

chrome为什么不为嵌入式Twitter时间轴渲染flexbox定位？

1 个答案: