Greetings everyone! I am looking to center my slideshow on my website and would greatly appreciate any assistance.
ISSUE I am trying to center the logo and the entire slideshow, but as you can see, it is slightly off-center to the right. VIEW ISSUE(IMG)
CODE
body {
background: #E9E9E9;
}
div.box {
display: block;
text-align: center;
margin: auto;
z-index: 5
}
/* Navigation Menu Styles... */
/**********Start slideshow************/
.slideshow {
position: relative;
margin: auto;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
/* Slideshow Animation Keyframes... */
@-webkit-keyframes css-animation-fade {
from { opacity:0;}
5% {opacity:1;}
15% {opacity:1;}
20% {opacity: 0;}
to {opacity: 0;}
}<!DOCTYPE html>
<html>
<head>
<title>Paid Templates Packages</title>
<link rel="stylesheet" href="paid.css" media="screen" title="no title" charset="utf-8">
<link href="paid.css" rel="stlesheet" type="text/css">
</head>
<body>
<div class="box">
<a href="index.html"><img src="icon1.png" width="50%" height="50%"></a>
<div id="wrapper">
<div id="navMenu">
<!-- Navigation List Items... -->
<br class="clearFloat">
</div>
</div>
<div class="slideshow">
<img src="icon1.png" class="css-img">
<img src="icon1.png" class="css-img">
<img src="icon1.png" class="css-img">
<img src="icon1.png" class="css-img">
<img src="icon1.png" class="css-img">
<img src="icon1.png" class="css-img">
</div>
</div>
</body>
</html>When viewing the webpage on Chrome, the slideshow appears slightly offset to the right. Any help in resolving this issue would be highly appreciated. Thank you in advance for your assistance!
Sincerely, Zefrolity
In the "RUN SNIPPET", the slideshow displays as desired initially, however, when images fade in, they appear stacked under each other instead of transitioning smoothly.