无法将DIV放置在图像幻灯片的内部

Question

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 1

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 .

Answer 2

All you need to do is make the following modifications to your text2 class:

Add

margin: 0 auto;

and change

position: relative;

Answer 3

There are several ways of doing this. The one I'd use is the following. Just add this to your css:

.mySlides {
    position: relative;
}
.text2 {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%);
    /* removed bottom: 16px; */
}

This will always center matter the height or width of your .text2 element

http://codepen.io/mattmuirhead/pen/wGVbrr

edit: This is to center both horizontally and vertically

Answer 4

Add the following to your text2 class's CSS:

left: 50%;
margin-left: -30%;

The class is already absolutely positioned. So the left: 50% attribute moves the left side of the element to the center. Then the margin-left: -30% moves it back to the left by half of its width (the element's width is 60% according to the CSS you provided).

Answer 5

Actually, you're doing it the wrong way around. The parent gets the text-align property, and the child the display.

so:

.text {
  text-align:center;
}
.text2 {
  display:inline-block; 
  position:relative;
}

you can't do this with an absolute positioned element. If it HAS to be position:absolute; you could also use the transform property as follows:

.text2 {
  position:absolute;
  left:50%
  -webkit-transform:translateX(-50%);
  transform:translateX(-50%);
}

Why does that work? Because Translate moves the element based on it's OWN width, whereas position:absolute; left:50%; moves the element based on it's PARENT width.