Vue实现span在div中竖向局中。

您所在的位置：网站首页 › vue中的span › Vue实现span在div中竖向局中。

Vue实现span在div中竖向局中。

#Vue实现span在div中竖向局中。| 来源: 网络整理| 查看: 265

1.效果图

图中的‘知道了‘所在的外层就是一个，这个div的高度自适应的，实现要求：‘知道了’在正中间。 // 注意：这里用的模板语言是pug和stylus的，.right就是，如果看不懂可以看我的这篇Pug和 stylus用法 2.实现代码

.right(@click="clickSure()") span 知道了 .right flex 1 display flex flex-direction column justify-content center span width 100% height 34px line-height 34px font-size:16px; font-weight:400; color #1790ED text-align center

3.实现核心 1.外层设置为display flex和flex 1，这样高度和宽度是占满的，因为的父布局也是自适应的，而图中的Dialog设置了minheight 20%,所以，的父布局会占满20%+里面剩下的，也就是自适应的了。 2.基于第一点，再设置justify-content center，整个span就会在div里面居中显示了,flex-direction coulumn其实要不要都可以。总结就是span在div竖向居中的核心代码

flex 1 display flex justify-content content

3.最后为了保险，还要让span的文字自己内部也居中。 1.设置text-align center,2.让height和line-height相等。 span内部文字居中核心代码是：

text-align center height 30px line-height 30px

上面的30px是任意设置的，你看你ui给的图的height是多少，line-height设置一样就行了。

【本文地址】

Vue实现span在div中竖向局中。

Vue实现span在div中竖向局中。

今日新闻

推荐新闻