500字范文,内容丰富有趣,生活中的好帮手!
500字范文 > CSS 将两个button按钮垂直+水平居中

CSS 将两个button按钮垂直+水平居中

时间:2023-07-13 13:15:33

相关推荐

CSS 将两个button按钮垂直+水平居中

CSS 将button按钮垂直+水平居中

参考文章:CSS实现垂直居中的5种方法

具体效果如图:

这个方法使用了一个position:absolute,有固定宽度和高度的 div。这个 div 被设置为top:0; bottom:0;。但是因为它有固定高度,其实并不能和上下都间距为 0,因此margin:auto;会使它居中。使用 **margin:auto;**使块级元素垂直居中是很简单的。

.vert-center{position:absolute;top:0;bottom:0;left: 0;margin: auto;right: 0;}

我用的是colorui框架的样式

.text-center{text-align:center;//实现水平居中}

一开始想只用left: 0;right: 0;来实现水平居中,

结果发现不行,得加text-center的,缺一不可

<div id="w1" class="act-photo" style="position:relative;height:300rpx;width:100%;margin:auto"><div id="w2" class="vert-center text-center" style="height:64rpx;"><button class="cu-btn bg-black text-white shadow-blur text-xs" style="opacity: 0.7;width:150rpx;" @click="download">下载</button><button class="margin-left cu-btn bg-black text-white shadow-blur text-xs" style="opacity: 0.7;width:150rpx;" @click="submit">提交</button></div></div>

这里关键的地方就是id=w2这个div;

如果没有加这个div的话,两个按钮会发生重叠。

这个div的作用是使w2先垂直居中于w1

(这里要注意设置w2的height高度跟button的相等,不设置的话高度会等于w1的导致无法垂直居中)

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。