How to center image with left aligned text overlay - html

Question

I would like to have a header image that is centered in the browser window. Within the image I need left aligned text and an icon overlay in upper right corner of image. All of the elements must flow to get as the window resizes and remain center. I'm sure it's simple but I just can't seem to make it happen.
#banner{
position:relative;
display:block;
}
#bannerText{
position:absolute;
top:20px;
left:60px;
}
.header_option_overlay {
position:absolute;
top:5px;
right:0px;
left:420px;
}
<div id="center_me">
<div id="banner" >
<img src="http://images.trvl-media.com/media/content/shared/images/travelguides/hotels/Puerto-Vallarta-180016.jpg" width="456" height="190">
<img border="0" src="http://i.istockimg.com/file_thumbview_approve/40285808/3/stock-illustration-40285808-hamburger-icon.jpg" width="15" height="15">
<div id="bannerText">
<p>Beach's</p>
<p>Mexico</p>
</div>
</div>
</div>
Here is the jsfiddle
As you can see the image, text, and icon are all left align to the browser window. If I try to center everything text and images do not stay together. How do I make everything center in the window?

Answer 1

You almost have resolved, with one of these two examples you can do it, you choose the one that best suits you.
1- Setting display:inline-block to #banner to allows it to fit the width of its content and text-align: center to #center_me to center the content.
#center_me{
text-align: center; /*to center the content*/
}
#banner {
position:relative;
display:inline-block; /*allows it to fit the width of its content*/
}
#bannerText {
position:absolute;
top:20px;
left:60px;
}
.header_option_overlay {
position:absolute;
top:5px;
right: 5px; /*adjusting to nearly border*/
}
<div id="center_me">
<div id="banner">
<img src="http://images.trvl-media.com/media/content/shared/images/travelguides/hotels/Puerto-Vallarta-180016.jpg" width="456" height="190" /> <img border="0" src="http://i.istockimg.com/file_thumbview_approve/40285808/3/stock-illustration-40285808-hamburger-icon.jpg" width="15" height="15" />
<div id="bannerText">
<p>Beach's</p>
<p>Mexico</p>
</div>
</div>
</div>
2- Setting a fixed width = to the img width to #banner and using margin: 0 auto to center it.
#banner {
position:relative;
width: 456px; /*setting a fixed width = to the img width*/
margin: 0 auto; /*using margin to center it*/
}
#bannerText {
position:absolute;
top:20px;
left:60px;
}
.header_option_overlay {
position:absolute;
top:5px;
right: 5px; /*adjusting to nearly border*/
}
<div id="center_me">
<div id="banner">
<img src="http://images.trvl-media.com/media/content/shared/images/travelguides/hotels/Puerto-Vallarta-180016.jpg" width="456" height="190" /> <img border="0" src="http://i.istockimg.com/file_thumbview_approve/40285808/3/stock-illustration-40285808-hamburger-icon.jpg" width="15" height="15" />
<div id="bannerText">
<p>Beach's</p>
<p>Mexico</p>
</div>
</div>
</div>
Noting that if you have an img bigger than the width that you want, just add overflow: hidden to #banner to hidden the overflow part of the img and maybe a desired fixed height if you want.

Answer 2

Is that what you want?
.my-image {
background-image: url(http://images.trvl-media.com/media/content/shared/images/travelguides/hotels/Puerto-Vallarta-180016.jpg);
width: 456px;
height: 190px;
position: relative;
margin: 0 auto;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding: 20px 50px;
}
.my-image a img {
width: 15px;
height: 15px;
position: absolute;
top: 5px;
right: 5px;
}
<div class="my-image">
<p>Beach's</p>
<p>Mexico</p>
<img src="http://i.istockimg.com/file_thumbview_approve/40285808/3/stock-illustration-40285808-hamburger-icon.jpg" alt="">
</div>

Answer 3

For HTML:
<div id="center_me">
<div id="banner">
<img id="back" src="http://images.trvl-media.com/media/content/shared/images/travelguides/hotels/Puerto-Vallarta-180016.jpg">
<img border="0" src="http://i.istockimg.com/file_thumbview_approve/40285808/3/stock-illustration-40285808-hamburger-icon.jpg" width="15" height="15">
<div id="bannerText">
<p>Beach's</p>
<p>Mexico</p>
</div>
</div>
</div>
For CSS:
#center_me {
width: 50%;
margin: 0 auto;
}
#banner {
position: relative;
}
#banner #back {
width: 100%;
height: auto;
}
#bannerText {
position: absolute;
top: 20px;
left: 40px;
}
.header_option_overlay {
position: absolute;
top: 5px;
right: 5px;
}
hope this helps