div中的img居中文字的移动友好网站

Question

我需要创建一个响应式布局，其中基本上我在屏幕中央有一个图像，文本以图像为中心。
我不确定如何正确地将所有这些事情集中在一起。我尝试将图像作为div中的背景图像，但不能将其居中，同时确保它像屏幕一样增长/缩小。
现在我不确定如何将它全部包含在内，没有溢出，并且没有设置px大小（我已经发现了很多帮助文章）。

这是我的想法：

在我的网站上，我已经完成了部分工作，看起来像这样：

除了我需要它也垂直居中，跨度和屏幕一样宽，而不是像图像那样宽。

https://jsfiddle.net/zb50azjx/

HTML：

<div class="news">
<div><img src="http://m.elysiumrpg.com/images/newstitle.png"/><span>News Title</span></div>
</div>

CSS：

.news {
    color: #191919;
    font-size: 15pt;
}

.news div img {
    z-index: 0;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    display: inline-block;
}

.news div span {
    z-index: 1;
    position: absolute;
    text-align:center;
    left: 0;
    width: 100%;
    color: #000000;
}

Answer 1

＆＃13;

＆＃13;

.news {
	color: #191919;
	font-size: 15pt;
  display:inline-block;
  width: 100%;
  position: relative;
}

.news div img {
	z-index: 0;a
  width: 100%;
	margin-left: auto;
	margin-right: auto;
	position: relative;
	display: inline-block;
}

.news div span {
	z-index: 1;
	-webkit-transform: translateY(-50%);
   transform: translateY(-50%);
   top: 50%;
   position: absolute;
   left: 0;
   width: 100%;
   text-align: center;
}

＆＃13;

<div class="news">
<div><img src="http://m.elysiumrpg.com/images/newstitle.png"/><span>News Title</span></div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

你可以在新闻中将div作为位置相对和跨度作为位置：绝对和设置顶部：40％和左：40％这将为您提供图像中心的文本

＆＃13;

＆＃13;

.news {
  color: #191919;
  font-size: 15pt;
}
div.content {
  width: 100%;
  position: relative;
}
.news div span {
  position: absolute;
  top: 40%;
  left: 40%;
  color: #000000;
}

＆＃13;

<div class="news">
  <div class="content">
    <img src="http://m.elysiumrpg.com/images/newstitle.png" /><span>News Title</span>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

希望这有帮助

Answer 3

我不是100％清楚你想要在图像上居中的文字，但看看这是否是你所追求的：
http://codepen.io/panchroma/pen/gLEGqb

使用CSS为background-size:contain;的背景图像有时非常有用，因为它可以很好地缩放图像以适合div的大小

我已经简化了你的HTML和CSS了。

祝你好运

HTML

<div class="news">News Title </div>  

CSS

.news {
    color: #191919;
    font-size: 15pt;
  background:url('http://m.elysiumrpg.com/images/newstitle.png') ;
  background-size:contain;
  text-align:center;
  padding:20px 0;
}