0

So I have a slider and a slider wrapper. Both are absolutely positioned elements. The layout I currently have looks great on a desktop monitor (1920x1080). However not so good on a smaller laptop screen (the slider is shifted to the right and so out of center alignment). Below you will find the CSS for both the container of the slider and the slider itself.

#MasterSlider_container{
    height: 570px;
    position: absolute;
    width: 100%;
    background-color: #000;
    top: 20%; 
}

#slider1_container{
    left: 21%;
    top: 7%;
    border-style: solid;
    border-width: 8px;
    position: absolute; 
}

How do I center the slider in this div box so that when I view it on a laptop or a PC screen, it will appear in the middle completely and entirely on both viewing platforms.

Dan
  • 9,391
  • 5
  • 41
  • 73
Tom Woody
  • 1
  • 3

1 Answers1

0
#MasterSlider_container{
height: 570px;
position: relative;
width: 100%;
background-color: #000;
top: 20%; 
}

#slider1_container{
margin:0 auto;
border-style: solid;
border-width: 8px;
position: absolute; 
width:50%;
}

Change the width according to your needs. Only if you set the width you can see the container being centered

carrieat
  • 82
  • 5
  • Doesn't work. I have literally tried everything I have seen on the internet and im running it in a Google chrome live preview. – Tom Woody Aug 21 '14 at 03:03
  • you saw in the fiddle how it is centered. may be your sequencess of css is not letting your div to be centered. – carrieat Aug 21 '14 at 15:03
  • I discovered what it was, I had set position: absolute in the html file so it contradicted all my relative positioning attempts, ignorance is bliss... – Tom Woody Aug 21 '14 at 15:09