Question

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

＆＃13;

#banner{
    position:relative;
    display:block;
}

#bannerText{
    position:absolute;
    top:20px;
    left:60px;
}

.header_option_overlay {
    position:absolute;
    top:5px;
    right:0px;
    left:420px;
}

＆＃13;

<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>

＆＃13;

Here is the jsfiddle

如您所见，图像，文字和图标都与浏览器窗口保持对齐。如果我试图将所有文本和图像集中在一起。如何让所有内容都在窗口中居？

Answer 1

这就是你想要的吗？

.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>
  <a href="#home_panel"><img src="http://i.istockimg.com/file_thumbview_approve/40285808/3/stock-illustration-40285808-hamburger-icon.jpg" alt=""></a>
</div>

Answer 2

对于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">
    <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>

对于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;
}

希望这会有所帮助

Answer 3

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

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 - 设置固定宽度=将img宽度设置为#banner并使用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的溢出部分，如果你想要的话，也可以是所需的固定高度。 / p>

如何使用左对齐文字叠加

3 个答案: