幻灯片放映不居中?

时间:2017-09-05 14:54:53

标签: html css slideshow

我有一个我想要居中的幻灯片,但我无法正确居中,图像的左侧部分位于中间,因此图像不居中,任何人都知道为什么?< / p>

以下代码和图片:

CSS

.slider {
    width: 100%;
    margin: auto;
    height:400px;
    background-color: rgba(0,0,0,0.1);
}

.slider-wrapper{
    width: 100%;
    height: 400px;
}

.slide {
    position: absolute;
    max-width: 100%;
    max-height: 400px;
    margin:auto;
    opacity: 0;
    transition: opacity 500ms linear;
}

.slider包含:.slider-wrapper.slide.slide是我为每张图片使用的类。

HTML

<div class="slider" id="main-slider">
    <div class="slider-wrapper">
            <img src="images/eventos/image1.png" class="slide" />
            <img src="images/eventos/image2.png" class="slide" />
            <img src="images/eventos/image3.png" class="slide" />
            <img src="images/eventos/image4.png" class="slide" />
    </div>
</div>

此图片包含text-align:centermargin: 0 auto

enter image description here

而这一点确实

enter image description here

我的代码包含jquery所以幻灯片显示有效,如果需要,请问我也把它放进去。

更新

我发现了问题,问题是这些图片中的position: absolute,我删除了每个css和我拥有的任何div,并在.slide中保留了.slide和图片我刚刚离开position: absolute但仍然无法正常工作,我该怎么办?

4 个答案:

答案 0 :(得分:2)

您无法在绝对定位元素上应用text-align:center对齐。删除绝对位置,在包装器中使用text-align时图像应居中:

.slider {
    width: 100%;
    margin: auto;
    height:400px;
    background-color: rgba(0,0,0,0.1);
}

.slider-wrapper{
    text-align:center;
    width: 100%;
    height: 400px;
}

.slide {
    width: 100%;
    height: 400px;
    opacity: 1;
    transition: opacity 500ms linear;
    border:1px solid black;
}

但是,从您的代码中不清楚是否需要绝对位置。如果是这样,您可能需要求助于js计算。

<强>更新

从OP评论中,绝对位置是必需的。因此,有必要在幻灯片上设置left属性。如果已知滑动宽度,则可以通过从滑动宽度的一半减去视口宽度的一半来计算。例如,在200px宽的幻灯片上:

left:calc(50vw - 100px);

假设幻灯片的宽度可变,请使用js:

var myElement = document.getElementById('foo');
var width = myElement.offsetWidth;
myElement.style.left = 'calc(50vw - ' + width / 2 + 'px)';

代替按id查找元素,需要为每张幻灯片添加单独的ID,您可能希望使用getElementsByClassName('slide')将所有幻灯片存储在对象数组中,并根据当前显示的幻灯片检索宽度。

答案 1 :(得分:1)

如果要将设置为position: absolute的元素居中,则需要将leftright属性设置为0。即right: 0left: 0。看看下面的代码:

.slide {
    position: absolute;
    max-width: 100%;
    max-height: 400px;
    width: 200px;
    height: 200px;
    margin: 0 auto;
    left: 0;
    right: 0;
    /* opacity: 0; */
    transition: opacity 500ms linear;
    border: 1px solid #000;
}

&#13;
&#13;
.slider {
    width: 100%;
    margin: auto;
    height:400px;
    background-color: rgba(0,0,0,0.1);
}

.slider-wrapper{
    width: 100%;
    height: 400px;
}

.slide {
    position: absolute;
    max-width: 100%;
    max-height: 400px;
    width: 200px;
    height: 200px;
    margin: 0 auto;
    left: 0;
    right: 0;
    /* opacity: 0; */
    transition: opacity 500ms linear;
    border: 1px solid #000;
}
&#13;
<div class="slider" id="main-slider">
    <div class="slider-wrapper">
            <img src="images/eventos/image1.png" class="slide" />
            <img src="images/eventos/image2.png" class="slide" />
            <img src="images/eventos/image3.png" class="slide" />
            <img src="images/eventos/image4.png" class="slide" />
    </div>
</div>
&#13;
&#13;
&#13;

答案 2 :(得分:0)

也许尝试position: fixed;然后top: 50%; left: 50%;

答案 3 :(得分:0)

我混合使用相同的布局,对我来说,答案是通过“ uk-child-width-1-3 @ m”控制“ uk-slider-items”类的直接子级的宽度” 如下:

            <div class="uk-container">
            <h1 class="uk-heading-line uk-text-center uk-padding-large"><span>Similar Products</span></h1>

            <div uk-slider="center: true">

                <div class="uk-position-relative uk-visible-toggle uk-light">

                    <ul class="uk-slider-items uk-child-width-1-2 uk-child-width-1-3@s uk-child-width-1-3@m uk-grid uk-grid-match"  >

                        <li v-for="(pro,index) in category"  :key="index">
                            <div class="uk-card uk-card-default">
                                <div class="uk-card-media-top">
                                    <img src="/product.jpg" alt="">
                                </div>
                                <div class="uk-card-body">
                                    <h3 class="uk-card-title">{{pro.name}}</h3>
                                    <p>{{pro.details}}</p>
                                </div>
                            </div>
                        </li>

                    </ul>

                    <a class="uk-position-center-left uk-position-small uk-background-secondary" href="#" uk-slidenav-previous uk-slider-item="previous"></a>
                    <a class="uk-position-center-right uk-position-small uk-background-secondary" href="#" uk-slidenav-next uk-slider-item="next"></a>

                </div>

                <ul class="uk-slider-nav uk-dotnav uk-flex-center uk-margin"></ul>

            </div>
        </div>