移动友好网站与中心文本在img中div

我需要创建一个响应式布局，其中基本上我有一个在屏幕中心的图像和图像中心的文本。
我不知道如何正确地集中所有这些东西。我试图将图像制作成div格式的背景图片，但无法将其作为中心，同时确保它随着屏幕的增大/缩小而变化。
现在我不知道如何使它全部非常容易，没有溢出，也没有设置px大小（我发现很多帮助文章指定）。移动友好网站与中心文本在img中div

这是我的想法：

在我的网站此刻我做的一部分工作，它看起来像这样：

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

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

来源

2016-12-20 tiny_trevor

你看着使用引导？ –

我听说过它，我想...使用谷歌搜索，现在就试用，谢谢！ –

是的，请检查一下，这是行业用作标准做法，对于不同的设备 –

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

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

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

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

来源

2016-12-20 20:42:45

hm，在实际网站上实现它使标题进入整个文档高度的中间，并使图像宽度等于屏幕宽度，当我需要它保持小于那个？ –

你添加了相对于.news元素的位置 –

是的，我把你的样本准确地复制出 –

可以使DIV无线薄消息，因为相对与量程位置的位置是：绝对的顶部设置：40％，剩下40％，这将让你在图像中居中文本

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

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

希望这有助于

来源

2016-12-20 20:45:06 Geeky

但是对于动态内容我们需要调整40％#Geeky –

我不是你想要什么居中文字图像上却看到100％的清楚，如果这是你所追求的：使用AB
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; 
}

来源

2016-12-20 21:53:05

移动友好网站与中心文本在img中div

回答

相关问题