Html Can'；不要让DIV在图像幻灯片中居中

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

我在我的网站上有一个图像幻灯片，基于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>

属性和子元素（text2）a

属性，但这不起作用。无论出于什么原因，无论我做什么，它都不会集中。感谢您的帮助。谢谢

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

/*-------------------------------------------------------------*/
/*幻灯片放映CSS3*/
*{框大小：边框框}
正文{字体系列：Verdana，无衬线；边距：0}
迈斯利德斯先生{
显示：无；
宽度：100%；
最大宽度：1300px；
高度：600px；
保证金：0自动；
}
.w3左、.w3右、.w3徽章{
光标：指针
}
.w3徽章{
高度：13px；
宽度：13px；
填充：0
}
/*幻灯片容器*/
.slideshow容器{
最大宽度：1300px；
最大高度：600px；
位置：相对位置；
保证金：自动；
}
.幻灯片-容器2{
最大宽度：650px；
高度：300px；
位置：相对位置；
保证金：0自动；
}
/*下一步和上一步按钮*/
.prev，.next{
光标：指针；
位置：绝对位置；
排名：0；
最高：50%；
宽度：自动；
填充：16px；
利润上限：-22px；
颜色：白色；
字体大小：粗体；
字号：18px；
过渡：0.6s缓解；
边界半径：0 3px 3px 0；
}
/*将“下一步按钮”置于右侧*/
.下一个{
右：0；
边界半径：3px 0 3px；
}
/*在悬停时，添加一个黑色背景色，带有一点透明*/
.prev:悬停，.next:悬停{
背景色：rgba（0,0,0,0.8）；
}
/*标题文本*/
.文本{
显示：内联块；
}
.text2{
文本对齐：居中；
边界半径：3px；
背景：rgba（0,0,0,0.8）；
颜色：#F2F2；
字体大小：15px；
填充：8px 12px；
位置：绝对位置；
底部：16px；
宽度：60%；
}
/*数字文本（1/3等）*/
.numbertext{
颜色：#F2F2；
字体大小：12px；
填充：8px 12px；
位置：绝对位置；
排名：0；
}
/*褪色动画*/
.褪色{
-webkit动画名称：淡入淡出；
-webkit动画持续时间：1.5s；
动画名称：淡入淡出；
动画持续时间：1.5s；
}
@-webkit关键帧淡入淡出{
来自{opacity:.4}
到{opacity:1}
}
@关键帧淡入淡出{
来自{opacity:.4}
到{opacity:1}
}
/*在较小的屏幕上，减小文本大小*/
@仅介质屏幕和（最大宽度：300px）{
.slprev、.slnext、.text{font size:11px}
}
/*-----------------------------------------------------------------*/

您可以将

左：0

和

右：0

添加到

.text2

类中，然后使用

边距：0自动

将其居中放置在容器的中间

---

.

您可以将

左：0

和

右：0

添加到

.text2

类中，然后使用

边距：0自动

将其居中放置在容器的中间

---

.

您只需对text2类进行以下修改：

加

改变

position: relative;

---

您只需对text2类进行以下修改：

加

改变

position: relative;

---

有几种方法可以做到这一点。我用的是下面这个。只需在css中添加以下内容：

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

这将始终以

.text2

元素的高度或宽度为中心

---

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

有几种方法。我用的是下面这个。只需在css中添加以下内容：

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

这将始终以

.text2

元素的高度或宽度为中心

---

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

将以下内容添加到

text2

类的CSS中：

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

---

该类已经完全定位。因此

left:50%

属性将元素的左侧移动到中心。然后

左边距：-30%

将其移回左边宽度的一半（根据您提供的CSS，元素的宽度为

60%

）

将以下内容添加到

text2

类的CSS中：

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

---

该类已经完全定位。因此

left:50%

属性将元素的左侧移动到中心。然后

左边距：-30%

将其移回左边宽度的一半（根据您提供的CSS，元素的宽度为

60%

。

实际上，您的做法是错误的。 父对象获取文本对齐属性，子对象获取显示

因此：

对于绝对定位的元素，无法执行此操作。 如果必须是位置：绝对；您还可以使用transform属性，如下所示：

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

---

为什么会这样？因为“平移”根据元素自身的宽度移动元素，而“位置”：绝对；左：50%；根据元素的父宽度移动元素。

实际上，您的操作方式不对。 父对象获取文本对齐属性，子对象获取显示

因此：

对于绝对定位的元素，无法执行此操作。 如果必须是位置：绝对；您还可以使用transform属性，如下所示：

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

---

为什么会这样？因为“平移”根据元素自身的宽度移动元素，而“位置”：绝对；左：50%；根据元素的父宽度移动元素。

请使用snippet功能包含相关CSS代码。

text2

div中的文本在我的浏览器中居中。你看到不同的东西了吗？还是希望div本身（显示为黑色条）居中？啊，对不起，应该指定。我想把黑条放在中间。我已经把文本放在中心了。实际上，你应该把HTML和CSS放在同一个代码段中。谢谢你的信息。我会更新这个，并记住这样做n