Slideshow not centering? - html

Question

I have a slideshow that I wanted to center, but I can't center it properly, the left part of the image stands exacly in the middle, so the image is not centered, anyone has an idea why?
Here's the following code and images:
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 contains: .slider-wrapper and .slide, .slide is the class I use for each image.
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>
This image contains text-align:center and margin: 0 auto
And this one doens't
My code contains jquery so the slideshow works, if needed, please ask so I put it in too.
UPDATE
I discovered the problem, the problem is the position: absolute in those images, I deleted every css and any div I had and left the the .slide and just the images, in .slide I just left position: absolute and it still didn't work, so what can I do?

Answer 1

You can't apply text-align:center alignment on a absolute positioned element. Remove the absolute position and the images should center when using text-align in your wrapper:
.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;
}
However, It is unclear from your code whether the absolute position is required. If so, you may need to resort to js calculations.
UPDATE
From OP comment, position absolute is required. Therefore, it is necessary to set the left attribute on slides. If the slide width is known, you could calculate by subtracting half of the viewport width from half of the slide width. For instance, on a 200px wide slide:
left:calc(50vw - 100px);
Assuming slides have variable width, resort to js:
var myElement = document.getElementById('foo');
var width = myElement.offsetWidth;
myElement.style.left = 'calc(50vw - ' + width / 2 + 'px)';
In lieu of finding elements by id, requiring individual ids for each slide, you may want to store all slides in an object array using getElementsByClassName('slide') and retrieving the width according to the slide currently displayed.

Answer 2

If you want to center an element that is set to position: absolute, you need to set the left and right properties to 0. I.e. right: 0 and left: 0. Check out the code below:
.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 3

Maybe try position: fixed; and then top: 50%; left: 50%;

Answer 4

The answer for me was controlling the width of the of the direct children of the class uk-slider-items through uk-child-width-1-3#m as follows:
<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>