文本在响应式设计中的位置

Question

我有一个响应式布局，背景居中，中间没有指定宽度属性。 现在我想要一个在背景图像内对齐的div。

像这样：

回应#Jasper Seinhorst ..

这是问题..它漂浮在div之外

HTML =＆gt;

<div class="view_banner" style="background: url({$header.headerimg}) center 0 no-repeat;">
{if $header.copyright}
<div class="copyright">Courtesy Cree Europe</div>
{/if}
</div>

CSS =＆gt;

.view_banner {position: relative; width: 100%; height:476px;}
 .copyright{position: absolute; right: 0; bottom: 0; font-size: 16px; color: black;}

Answer 1

使用背景图像添加相对于div的位置。 使用文本向div添加绝对位置。

＆＃13;

＆＃13;

#image_with_bg {
  position: relative;
  width: 200px; /* remove this */
  height: 50px; /* remove this */
  background-color: #ff0000;
}

#overlay_text {
  position: absolute;
  right: 0;
  bottom: 0;
  background-color: #fff;
}

＆＃13;

<div id="image_with_bg">
  <div id="overlay_text">Text goes here</div>  
</div>

＆＃13;

＆＃13;

＆＃13;