Question

我在Vue中制作了一个光滑的滑块组件，我试图在每个滑块项内部居中放置一个圆形div，但是我无法使它工作，在添加margin：auto之后它会水平居中，但是尽管使用align和justify中心，还是没有垂直居中，我知道如何使它工作吗？我认为这与滑动滑块如何通过javascript改变滑动项目的宽度有关...

<template>
<slick class="SLIDERcontainer6_maincontainer" ref="slick" :options="slickOptions">
    <div class="SLIDERcontainer6_item_container" v-for="slider in globals.producsSlider" :key="slider.title">
        <div class="SLIDERcontainer6_item_image" :style="'background-image:url('+slider.image+');'"></div>
    </div>
</slick>
</template>
<!--SCRIPTS-->
<script>
import { mapState } from 'vuex';
import Slick from 'vue-slick';
export default {
name: 'SLIDERcontainer10',


components: { Slick },


computed:
{
    ...mapState('Globals',['globals'])
},


data()
{
    return {
        slickOptions: {
        infinite: true,
        slidesToShow: 4,
        slidesToScroll: 1,
        prevArrow: '<i class="fa fa-chevron-left fs_bigger c_light" style="position:absolute; left:10px; top:50%; transform:translateY(-50%); z-index:99999;"></i>',
        nextArrow: '<i class="fa fa-chevron-right fs_bigger c_light" style="position:absolute; right:10px; top:50%; transform:translateY(-50%); z-index:99999;"></i>',
        arrows: true,
        autoplay: true,
        speed: 2000,
        autoplaySpeed: 4000,
        responsive: 
        [
        {
        breakpoint: 1120,
            settings: 
            {   
            slidesToShow: 3,
            slidesToScroll: 1,
            }
        },
        {
            breakpoint: 800,
            settings: 
            {
            slidesToShow: 2,
            slidesToScroll: 2
            }
        },
        {
            breakpoint: 600,
            settings: 
            {
            slidesToShow: 1,
            slidesToScroll: 1
            }
        }]
        },

    };
},


beforeUpdate()
{
    if (this.$refs.slick) {
        this.$refs.slick.destroy();
    }
},


updated()
{
    this.$nextTick(function () {
        if (this.$refs.slick) {
            this.$refs.slick.create(this.slickOptions);
        }
    });
},


mounted()
{
    console.log(this.$options.name+' component successfully mounted');

},


};
</script>
<!--STYLES-->
<style scoped>
.SLIDERcontainer6_maincontainer{width:100%; height:auto; position:relative;}
.SLIDERcontainer6_item_container{width:33.33%; height:350px; display:flex; flex-direction:column; align-items:center; justify-content:center; background-color:var(--web_primary_color); position:relative;}
.SLIDERcontainer6_item_image{width:275px; height:275px; border-radius:50%; background-size:cover; background-position:center; margin:auto; align-self:center;}
@media only screen and (max-width: 736px) 
{
}
</style>

Answer 1

尝试在显示器上添加！important：SLIDERcontainer6_item_container的flex。

.SLIDERcontainer6_item_container {
    display: flex !important;
}

似乎滑块库会覆盖显示属性。

无法在带有Flex的光滑滑块项目中居中div

1 个答案: