I'm working on centering an image slideshow within the viewport, regardless of its width. It's easy to accomplish when the viewport is wider than the image by using margin: auto;. However, when the viewport is narrower than the image, such as on a tablet in portrait mode, the image ends up against the left margin and isn't centered.
Centered in landscape mode:
https://i.sstatic.net/rVsAC.png
Centered in portrait mode:
https://i.sstatic.net/ObNH3.png
This is the HTML:
<div id="slidebound">
<div class="slider">
<img src="images/slider/slide04.png" alt=""/>
<img src="images/slider/slide03.png" alt=""/>
<img src="images/slider/slide02.png" alt=""/>
<img src="images/slider/slide01.png" alt=""/>
</div>
</div>
This is the CSS:
#slidebound {
width: 100%;
height: 300px;
overflow: hidden;
}
.slider {
width: 1024px;
height: 300px;
overflow: hidden;
position: relative;
margin: 0 auto;
}
.slider img {
position: absolute;
animation: slider 32s infinite;
opacity: 0;
width: 100%;
height: auto;
}
@keyframes slider {25% {opacity: 1;} 40% {opacity: 0;}}
.slider img:nth-child(4) {animation-delay: 0s;}
.slider img:nth-child(3) {animation-delay: 8s;}
.slider img:nth-child(2) {animation-delay: 16s;}
.slider img:nth-child(1) {animation-delay: 24s;}