Center a css slideshow

Question

I would like my slideshow to be centred on the page and appear above header 1, my html is below;

    <!DOCTYPE html>
<html>
<head>
<title>Title</title>

<style>
body {
    background-color: #D2D2D2;"
}
div {
    transform: opacity 3s;
    opacity: 1;
}

.hidden {
    opacity: 0;
}
ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
}

li {
    float: left;
}

li a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

li a:hover:not(.active) {
    background-color: #111;
}

.active {
    background-color: #4CAF50;
}
p.one {
    border: 1px lightgrey;
    background-color: lightgrey;
    padding-top: 50px;
    padding-right: 30px;
    padding-bottom: 40px;
    padding-left: 0px; 
}

IMG.displayed {
    display: block;
    margin-left: auto;
    margin-right: auto

}
@keyframes fade {
  0%   { opacity: 0; }
  11.11%   { opacity: 1; }
  33.33%  { opacity: 1; }
  44.44%  { opacity: 0; }
  100% { opacity: 0; }
}

.fadein { position:relative; height:332px; width:500px; outline: 1px solid blue; }
.fadein img { position:absolute; left:0; right:0; opacity:0; animation-name: fade; animation-duration: 9s; animation-iteration-count: infinite; }
.fadein img:nth-child(1) { animation-delay: 0s;  }
.fadein img:nth-child(2) { animation-delay: 3s;  }
.fadein img:nth-child(3) { animation-delay: 6s;  }

</style>


</head>

<body>
  <div class="wrapper fade-in">
<ul>
  <li><a href="home">Home</a></li>
  <li><a href="Our Routes>Our Routes</a></li>
  <li><a href="contact">Contact</a></li>
  <li><a class="active" href="about">About</a></li>
</ul>

<div class="fadein">
  <img src="4">
  <img src="3>
  <img src="2">
  <img src="1">
</div>



<h1 align="center"> About Us </h1>
<p class="one", align="center"> Text
</p>
<p class="one", align="center">Text</p>
  </div>
</body>
</html>

Had some problems putting it in a code box but think the important bits are shown, it's also asking for more details but can't think of anything else haha :) Thankyou!

Possible duplicate of [Horizontally center a div in a div](http://stackoverflow.com/questions/114543/horizontally-center-a-div-in-a-div) or any of the multitude of similar questions too often asked but found by searching SO. — Rob, Jan 07 '16 at 23:22

score 3 · Accepted Answer · answered Jan 07 '16 at 23:18

3

Add the following:

.fadein {
    position: relative;
    height: 332px;
    width: 500px;
    outline: 1px solid blue;
    margin: auto;
}

The margin:auto; aligns the slideshow to the centre.

answered Jan 07 '16 at 23:18

Maihan Nijat

9,054
11
62
110

image 4 is not fading out on the slideshow, one of the pictures is slightly smaller so it appears below the smaller one, do you know what is causing this? – snazzyconnor Jan 07 '16 at 23:27
Increase the `height` and `width` of the smaller picture. Do you have online link to check it? – Maihan Nijat Jan 07 '16 at 23:29
Thanks, got it working now :) Unfortunately not, should be ok now though – snazzyconnor Jan 07 '16 at 23:44

Center a css slideshow

1 Answers1