幻灯片不居中？

Question

我有一个幻灯片想要居中，但我不能正确居中，图片的左边部分恰好位于中间，所以图片没有居中，有人知道为什么吗？

下面是代码和图片：

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 是我用于每个图像的 class。

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:center 和 margin: 0 auto

而这个没有

我的代码包含 jquery 所以幻灯片可以播放，如果需要，请询问所以我也放了。

更新

我发现了问题，问题是那些图像中的 position: absolute，我删除了所有 css 和所有 div 我留下了 .slide 和只是图像，在 .slide 我刚刚离开 position: absolute 但它仍然没有用，所以我能做什么？

Answer 1

您不能对绝对定位元素应用 text-align:center 对齐方式。删除绝对位置，在包装器中使用文本对齐时图像应居中：

.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属性。如果幻灯片宽度已知，则可以通过幻灯片宽度的一半减去视口宽度的一半来计算。例如，在 200 像素宽的幻灯片上：

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') 将所有幻灯片存储在一个对象数组中，并根据当前显示的幻灯片检索宽度。

Answer 2

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

Answer 3

如果要将设置为 position: absolute 的元素居中，则需要将 left 和 right 属性设置为 0。 IE。 right: 0 和 left: 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;
}

.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;
}

<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>

Answer 4

我的答案是控制 class uk-slider-items 到 uk-child-width-1-3@m 的直接子项的宽度，如下所示：

<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>

幻灯片不居中？

Slideshow not centering?

html

css

slideshow

更新