Swiper中文论坛

标题: swiper-slide 内容垂直居中 [打印本页]

作者: 小小志 时间: 2015-5-5 09:32
标题: swiper-slide 内容垂直居中
首先谢谢管理员的解答，我先问下如何设置swiper-slide中的内容垂直居中

作者: 275189279 时间: 2015-5-5 15:54
里面的内容垂直居中就跟swiper没关系了吧，就是正常div包裹起来，如果高度百分百，那么用下绝对定位，然后margin-top设置为元素高度的一半的负数值，就能实现垂直居中，还有些属性vertical-align: middle、padding-top、padding-bottom结合、line-height的文字居中都能实现的，百度下div内容垂直居中，有很多解决办法

作者: 小小志 时间: 2015-5-5 17:40

275189279 发表于 2015-5-5 15:54
里面的内容垂直居中就跟swiper没关系了吧，就是正常div包裹起来，如果高度百分百，那么用下绝对定位，然后m ...

是每个swiper-slide 滑块的内的内容居中，你说的那几个方法都不适合，因为如果swiper-slide 滑块里面是图片的话，每张图片按比例缩放的宽高都不一样，更不可能用JS来计算，内容的高度不确定垂直居中只能用到display:table-cell; vertical-align:middle;，但是这种方法由于受到默认样式swiper-wrapper层这个display: flex;属性的限制变的无效了。

作者: mzl 时间: 2015-5-28 14:44
如果哥哥切换页面的高度不一样，底部会出现空白怎么去掉

作者: mzl 时间: 2015-5-28 14:44

如果各个切换页面的高度不一样，底部会出现空白怎么去掉

作者: mzl 时间: 2015-5-28 14:46

mzl 发表于 2015-5-28 14:44
如果各个切换页面的高度不一样，底部会出现空白怎么去掉

有的页面比较高，而又的页面比较短，高的页面会超过屏幕的高度

作者: 小小 时间: 2015-8-6 10:40
我也很想知道，怎么垂直居中，没人回答了么

作者: 荷斯坦阿云 时间: 2016-2-17 15:14

小小发表于 2015-8-6 10:40
我也很想知道，怎么垂直居中，没人回答了么

我的方式是把图片用background来展现出来background-position:center 0，然后这个展现背景图片的div在silde这个div下面，给这个div再width:100%;设置个高度完事了~~

作者: stitchC 时间: 2017-10-9 16:05
不好意思我来挖坟了昨天也在苦恼这个问题但是今天算是解决了，解决方案并不能说是完美
swiper 会产生两个包裹层一个是 container，另外一个是 wrapper，我的解决方法是令这两个东西高度100%，再将wrapper 设置display 为 flex 然后设置 align-items: center 就可以了

作者: 柒侠伍义 时间: 2017-10-25 17:46

http://bbs.swiper.com.cn/forum.p ... p;extra=&page=1

第09章：图片铺满窗口问题

作者: rster 时间: 2018-4-17 17:15

stitchC 发表于 2017-10-9 16:05
不好意思我来挖坟了昨天也在苦恼这个问题但是今天算是解决了，解决方案并不能说是完美
swiper 会产生两个 ...

高人，我也为这个问题苦恼好久，用你的方法，解决多谢

作者: a814274811 时间: 2018-5-11 14:32
为了20金币我也是蛮拼的

作者: 疯子太白 时间: 2019-6-18 17:32

stitchC 发表于 2017-10-9 16:05
不好意思我来挖坟了昨天也在苦恼这个问题但是今天算是解决了，解决方案并不能说是完美
swiper 会产生两个 ...

我也来挖坟了，你回答的非常棒

欢迎光临 Swiper中文论坛 (http://bbs.swiper.com.cn/)