html - 如何使用左对齐文本叠加层居中图像

Question

我想要一个位于浏览器窗口中央的标题图像。在图像中，我需要左对齐的文本和图像右上角的图标覆盖。当窗口调整大小并保持居中时，所有元素都必须流动才能获得。我确信这很简单，但我似乎无法实现它。

#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">
         <a href="#home_panel"  class="header_option_overlay"> <img border="0" src="http://i.istockimg.com/file_thumbview_approve/40285808/3/stock-illustration-40285808-hamburger-icon.jpg" width="15" height="15"></a>
         <div id="bannerText">
             <p>Beach's</p>
             <p>Mexico</p>
         </div>
     </div>
</div>  

Here is the jsfiddle

如您所见，图像、文本和图标都与浏览器窗口左对齐。如果我尝试将所有内容居中，文本和图像就不会在一起。如何使所有内容都位于窗口中心？

Answer 1

你几乎已经解决了，这两个例子中的一个你可以做到，你选择最适合你的。

1- 将 display:inline-block 设置为 #banner 以使其适应其内容的宽度，并将 text-align: center 设置为 #center_me 以使其内容居中。

#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" /> <a href="#home_panel" class="header_option_overlay"> <img border="0" src="http://i.istockimg.com/file_thumbview_approve/40285808/3/stock-illustration-40285808-hamburger-icon.jpg" width="15" height="15" /></a>

        <div id="bannerText">
            <p>Beach's</p>
            <p>Mexico</p>
        </div>
    </div>
</div>

2- 给 #banner 的 img 宽度设置固定宽度 = 并使用 margin: 0 auto 将其居中。

#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" /> <a href="#home_panel" class="header_option_overlay"> <img border="0" src="http://i.istockimg.com/file_thumbview_approve/40285808/3/stock-illustration-40285808-hamburger-icon.jpg" width="15" height="15" /></a>

        <div id="bannerText">
            <p>Beach's</p>
            <p>Mexico</p>
        </div>
    </div>
</div>

请注意，如果您的 img 大于您想要的宽度，只需将 overflow: hidden 添加到 #banner 以隐藏 img 的溢出部分，如果您愿意，也可以添加所需的固定高度。