无法将DIV置于图像幻灯片显示的中心

Question

这里第一次问一个问题，已经使用了很长时间了。我对编码比较陌生，而且我正在为学校做一个项目。

我的网站上有一个图片幻灯片，基于W3schools创建的幻灯片，在幻灯片中我创建了一个带有半透明框背景的字幕框。出于某种原因，我似乎无法将标题框水平居中。我幻灯片的代码目前如下所示：

<!--- 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>

此CCS及其他网站可在以下链接中查看。我用相同大小的占位符替换了图像。 http://codepen.io/Ethan_Matlack/pen/MyNdWG

根据我在堆栈溢出时看到的其他帖子，我尝试过分配父元素（文本）

 display: inline-block   

属性和子元素（text2）a

 text-align: center

属性，但这不起作用。无论出于何种原因，无论我做什么，它都不会成为中心。任何帮助表示赞赏。谢谢！

以下是所有相关的CSS代码：

/* ----------------------------------------------------------------- */
/* 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}
}
/* ----------------------------------------------------------------- */

编辑：我选择只将CSS放入代码段，因为这与问题相关，并且可以帮助其他人轻松找到答案。为了使代码段能够正常运行，我几乎需要所有与代码无关的代码。可以在codepen链接中看到完整的代码。

Answer 1

您可以将left: 0和right: 0添加到.text2课程，然后使用margin: 0 auto;将其置于其容器中间位置。

Updated codepen

Answer 2

您需要做的就是对text2类进行以下修改：

添加

margin: 0 auto;

并更改

position: relative;

Answer 3

有几种方法可以做到这一点。我使用的是以下内容。只需将其添加到您的CSS：

.text2

这将始终以<header> <title>Test</title> </header> 元素

的高度或宽度为中心

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

编辑：这是水平和垂直居中

Answer 4

将以下内容添加到left: 50%; margin-left: -30%; 班级的CSS中：

left: 50%

该课程已经绝对定位。因此margin-left: -30%属性将元素的左侧移动到中心。然后60%将其宽度的一半移回左侧（根据您提供的CSS，元素的宽度为 <form name="AddArticle" ng-submit="addArticle()" class="form add-article"> <p ng-repeat="object in data track by $index"> <input type="text" ng-model="object.text" /> </p> </form> <button ng-click="addInput()"> add </button> {{data}} </div> 。

Answer 5

实际上，你是以错误的方式做事。 父级获取text-align属性，子级获取显示。

这样：

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

您无法使用绝对定位元素执行此操作。 如果它是位置：绝对;你也可以使用transform属性，如下所示：

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

为什么这样做？因为Translate根据它的OWN宽度移动元素，而position：absolute;左：50％;根据它的父母宽度移动元素。