问题
之前实现一个toast控件, 效果如下:
toast
代码见center aligned toast with top+transfrom
很简单, 水平居中用老办法就好了:
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
但是有个问题, 让我不爽. 如下图:
问题
可以看到, 这里提前换行了, 其实不换行一行完全放得下的.
原因
那么为什么换行了呢? 因为我们的实现方法是:
- 先
top: 50%; left: 50% - 然后往回退水平竖直各50%.
其中第一步导致了提前换行. 我加个不transform的就一目了然了.
dummy-toast
其中右下角的那个是不加transform的, 可以看到换行是因为它碰到边界了.
解决方法
沿用这个套路的话, 没想到什么解决方法. 只能转用flex.
很简单:
display: flex;
justify-content: center;
align-items: center;
flex-toast还有个好处是可以给左右加margin, 让边缘不紧贴容器, 好看些. 代码见center aligned toast with flex
flex-toast
网友评论