I am facing a challenge with positioning the banner slideshow controls div in the middle of the screen on top of a full-width slideshow. The main container's width is set to 100%, which is causing issues with centering the controls div.
I have attempted setting the main container to relative and the div to absolute positioning, but it does not align in the middle without specifying a width and margin, which is not feasible since the slideshow needs to be 100% width.
Is there a workaround or alternative approach that can be suggested to achieve this layout?
<div id="banner_slideshow_container">
<div id="banner_slideshow">
<a href="about-us.php" style="background-image: URL(ui/banners/banner1.jpg)"></a>
<a href="about-us.php" style="background-image: URL(ui/banners/banner2.jpg)"></a>
<a href="about-us.php" style="background-image: URL(ui/banners/banner3.jpg)"></a>
<a href="about-us.php" style="background-image: URL(ui/banners/banner4.jpg)"></a>
<a href="about-us.php" style="background-image: URL(ui/banners/banner5.jpg)"></a>
</div>
<div id="banner_slideshow_controls">
<div class="slideshow_caption">TEXT FOR BANNER</div>
<div class="slideshow_button">More Information</div>
<div id="prev" class="img_replace">Previous</div>
<div id="next" class="img_replace">Next</div>
</div>
</div>
#banner_slideshow_container {
width: 100%;
height: 366px;
margin-top: 339px;
background-color:#ccc;
}
#banner_slideshow {height:366px}
#banner_slideshow a{
width:100%;
height:100%;
display:block;
}
#banner_slideshow_controls {
position:relative;
top:-100px;
margin: auto 0;
width:900px;
z-index:10;
border:2px solid green
}
Thank you for any assistance provided.