javascript - 调整浏览器大小时，CSS3 转换后的 div 会移动

Question

我的专栏是这样的:

这看起来不错，但是当我缩小浏览器时，div 向上移动，如下所示:

我希望它在收缩时留在原地:

知道这里发生了什么吗 - 是否有针对此的 CSS 修复？

js( react ):

<div>
     <Icon name="plus" style={{display: 'block', margin: '0 auto'}}/>
     <div className="rotate-div">TESTING</div>
</div>

CSS:

.rotate-div {
    transform: rotate(270deg) !important;
    margin-top: 30px !important;
}

我尝试增加容器的高度、移除填充、添加更多边距，但似乎没有什么不同。

Answer 1

首先，我根本不推荐使用 !important，这是一种不好的做法，并且会混淆您的代码。在这里你只需要在“测试”和图标之间做一个填充。对于旋转 div:

.rotate-div {

    padding-top: 20px; /* You can change the pixel amount */

}

移除 margin-top 和 !importants