Ethan Matlack Ethan Matlack - 6 months ago 13
HTML Question

Can't get DIV to center inside of image slideshow

First time here asking a question, been using this for a long time. I'm relatively new to coding and I'm doing a project for school.

I have an image slideshow on my website, based on the one created by W3schools and inside that slideshow I have created a caption box with a semi-transparent box background. For some reason I cannot seem to get that caption box centered horizontally. The code for my slideshow currently looks like this:

<!--- Image slideshow --->
<div class="slideshow-container">
<a href="#slideshow" id="slideshow">
<div class="text">
<div class="mySlides fade">
<div class="numbertext">1 / 5</div>
<img src="images/city2.jpg" style="width:100%">
<div class="text2">Caption 1</div>
</div>
<div class="mySlides fade">
<div class="numbertext">2 / 5</div>
<img src="images/elevator3.jpg" style="width:100%">
<div class="text2">Caption 2</div>
</div>
<div class="mySlides fade">
<div class="numbertext">3 / 5</div>
<img src="images/nanotech2.jpg" style="width:100%">
<div class="text2">Caption 3</div>
</div>
<div class="mySlides fade">
<div class="numbertext">4 / 5</div>
<img src="images/hyperloop3.jpg" style="width:100%">
<div class="text2">Caption 4</div>
</div>
<div class="mySlides fade">
<div class="numbertext">5 / 5</div>
<img src="images/vfarming2.jpg" style="width:100%">
<div class="text2">Caption 5</div>
</div>

<a class="prev" onclick="plusSlides(-1)">&#10094;</a>
<a class="next" onclick="plusSlides(1)">&#10095;</a>
</div>
</a>
</div>


This CCS and rest of the website can be seen at the link below. I've replaced the images with placeholders of the same size. http://codepen.io/Ethan_Matlack/pen/MyNdWG

Based on other post I've seen on stack overflow I've tried assigning the parent element (text) a

display: inline-block


attribute and the child element (text2) a

text-align: center


attribute but this didn't work. For whatever reason no matter what I do it won't center. Any help is appreciated. Thanks!

Here is all of the relevant CSS code:



/* ----------------------------------------------------------------- */
/* Slideshow CSS3 */
* {box-sizing:border-box}
body {font-family: Verdana,sans-serif;margin:0}

.mySlides {
display:none;
width: 100%;
max-width: 1300px;
height: 600px;
margin: 0 auto;
}
.w3-left, .w3-right, .w3-badge {
cursor:pointer
}
.w3-badge {
height:13px;
width:13px;
padding:0
}

/* Slideshow container */
.slideshow-container {
max-width: 1300px;
max-height: 600px;
position: relative;
margin: auto;
}

.slideshow-container2 {
max-width: 650px;
height: 300px;
position: relative;
margin: 0 auto;
}

/* Next & previous buttons */
.prev, .next {
cursor: pointer;
position: absolute;
top: 0;
top: 50%;
width: auto;
padding: 16px;
margin-top: -22px;
color: white;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
}

/* Position the "next button" to the right */
.next {
right: 0;
border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
background-color: rgba(0,0,0,0.8);
}

/* Caption text */
.text {
display: inline-block;
}

.text2 {
text-align: center;
border-radius: 3px;
background: rgba(0,0,0,0.8);
color: #f2f2f2;
font-size: 15px;
padding: 8px 12px;
position: absolute;
bottom: 16px;
width: 60%;
}

/* Number text (1/3 etc) */
.numbertext {
color: #f2f2f2;
font-size: 12px;
padding: 8px 12px;
position: absolute;
top: 0;
}

/* Fading animation */
.fade {
-webkit-animation-name: fade;
-webkit-animation-duration: 1.5s;
animation-name: fade;
animation-duration: 1.5s;
}

@-webkit-keyframes fade {
from {opacity: .4}
to {opacity: 1}
}

@keyframes fade {
from {opacity: .4}
to {opacity: 1}
}

/* On smaller screens, decrease text size */
@media only screen and (max-width: 300px) {
.slprev, .slnext,.text {font-size: 11px}
}
/* ----------------------------------------------------------------- */





EDIT: I've opted to put only the CSS into the snippet as this is relevant to the questions and will help anyone else easily find an answer. In order for the snippet to be functional I would need almost all the rest of my code which isn't relevant to the question. The full code can be seen in use at the codepen link.

Answer

You can add left: 0 and right: 0 to your .text2 class and then use margin: 0 auto; to center it on the middle of its container.

Updated codepen.

Comments