Reputation: 13

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.

Upvotes: 1

Answers (5)

Tieskevo

Reputation: 71

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.

Upvotes: 0

Joshua Carmody

Reputation: 13730

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).

Upvotes: 0

Matt Muirhead

Reputation: 53

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

Upvotes: 0