0

I built a slideshow using responsiveslides.js (http://responsiveslides.com/). The slideshow is now taking in my whole webpage. I'm currently trying to center this slideshow.

I tried to solve the issue with this question, but I'm only getting some half results with the answer provided by Kay... (content centered horizontally, not vertically + the next/prev buttons are not on my content anymore..

Anyone have some tricks to help me out? I can post my code if needed.

Dbajram
  • 1

1 Answers1

0

Flexbox!!

I don't know anything about your slider but this will put a single target div into the middle of the page - almost. It centers horizontally but puts the top of the target div in the middle vertically. To fix that, adjust the height from 100vh to something smaller (ie, subtract half the size of the target div).

    body {
        height:100vh;
        display:-webkit-flex;
        display:flex;
        -webkit-justify-content:center;
        justify-content:center;
        -webkit-align-items:center;
        align-items:center;
        flex-direction:row;
        -webkit-flex-direction: row;
        }

UPDATE:

You could add a container div. Eg,

<body><div class='container'>your slideshow</div></body>

Then use:

.container { height:100vh; width:100vw; display:-webkit-flex; display:flex; -webkit-justify-content:center; justify-content:center; -webkit-align-items:center; align-items:center; flex-direction:row; -webkit-flex-direction: row; }

Then you can adjust the width down until it acts nicely.

tqwhite
  • 658
  • 7
  • 16
  • Thanks a lot for your comment. If I insert this; the situation is better vertically ( centered); but horizontally my slide sits on the left side of my page. – Dbajram Sep 06 '16 at 18:13
  • On my screen also a scrollbar is generated, quite strange because the slideshow isn't that big. – Dbajram Sep 06 '16 at 18:25