移動友好網站與中心文本在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

回答

相關問題