div中位于浏览器窗口中心的文本的绝对位置

如何解决div中位于浏览器窗口中心的文本的绝对位置

当div与浏览器窗口的左侧对齐时，很容易将文本相对于div绝对定位。浏览器窗口的宽度可以更改大小，文本保持在正确的位置。但是我有一个固定宽度的网页，该网页始终位于浏览器窗口的中心。无论浏览器窗口的宽度如何，我的div都位于网页中心。该div包含一张图片。我需要将文本绝对定位在图像顶部。我的代码是：

<div id="wrapper">
    <div> <img style="max-width:100%; max-height:100%; display:block;" src="../../assets/logos/skitours_title_756w_100h.gif" alt="Website logo">
        <div class="tour_title"> <h3>This is the title</h3> </div>
    </div>
</div>

#wrapper {
    width:756px;
    height:auto;
    margin: auto auto; 
    margin-bottom:5px;
}

.tour_title {
    font-family:Verdana,Arial,Helvetica,sans-serif;
    font-size:20px;
    font-weight:bold;
    color:#696969;
    display:block;
    position:absolute;
    width:500px;
    top:40px;
    left:20px;
}

无论浏览器窗口的宽度如何，都会导致图像居中放置在网页上。

但是，文本（tour_title）的绝对位置是相对于浏览器窗口的左侧，而不是图像。不管浏览器窗口的宽度如何，如何纠正代码，使文本相对于网页？

解决方法

如果我的理解正确，您希望将文本与图像相关。 如果是这样，您应该：

1. 确定包装位置：相对位置，以便“绝对”文本而不是浏览器/网页引用它。
2. 使文本div text-align：center;宽度：100％;使其对准包装纸的中心。
3. 成为顶尖：随您便。 像这样：

#wrapper {
    width:756px;
    height:auto;
    margin: auto auto; 
    margin-bottom:5px;
    border-style:solid;
    position:relative;
}

.tour_title {
    font-family:Verdana,Arial,Helvetica,sans-serif;
    font-size:20px;
    font-weight:bold;
    color:#ff00ff;
    position: absolute;
    text-align:center;
    width:100%;
    top: 50%;
}