Absolute position of text in div that is centered in browser window - html

Question

It is easy to absolutely position text relative to a div when the div is aligned with the left side of a browser window. The width of the browser window can change size and the text stays in the correct position. But I have a fixed width web page that is always centered in the browser window. I have a div that is centered on the web page regardless of the width of the browser window. This div contains an image. I need to absolutely position text on top of the image. My code is:
<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;
}
That results in the image being centered on the web page regardless of the width of the browser window.
But the absolute positioning of the text (tour_title) is relative to the left side of the browser window, not the image. How do I correct the code so that the text is relative to the webpage regardless of the width of the browser window?

Answer 1

If I understand correctly, you want to make the text relative to the image.
If that's the case, you should:
Make the wrapper position: relative so the "absolute" text references it instead of the browser/webpage.
Make the text div text-align:center; and width:100%; for it to align at the center of the wrapper.
Make the top: whatever you wish.
Something like this:
#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%;
}