無法獲得HTML文本以保持響應式佈局中div的居中位置

遇到了一個問題，我試圖讓文本保持居中在圖像頂部的div中間。在桌面上看起來不錯，但是一旦我開始嘗試使它變得流動起來，它就會被搞砸了。我認爲這是因爲我在div中使用固定高度，但我嘗試了高度：auto;而所做的一切就是將文本與頂部對齊，因爲它不知道div高度究竟是什麼。任何人都知道更好的解決方案？無法獲得HTML文本以保持響應式佈局中div的居中位置

首先，這裏是有問題的網站：http://originalchuck.com/ 它位於頁面中間。三大圖像。

現在，這裏是我目前使用的CSS：

span.text-content, div.homepage-bags span.text-content-bags { color: #fff; display: table; font-size: 30px; left: 0px; position: absolute; top: 0px; text-shadow: 2px 1px 3px rgba(0, 0, 0, 0.5), 0px 1px 3px rgba(255, 255, 255, 0.5); text-transform: uppercase; width: 100%; } 

div.homepage-featured span.text-content { height: 620px!important; } 

div.homepage-buckets span.text-content { height: 288px!important; } 

div.homepage-bags span.text-content-bags { height: 288px!important; } 

div.homepage-featured span.text-content span, div.homepage-bags span.text-content-bags span { display: table-cell; text-align: center; vertical-align: middle; }

來源

2014-09-30 Adam Bell

請勿使用身高！對每個span.text-content重要。它應該在height: 100%;這裏工作正常。也從span.text-content刪除display: table;，我們將絕對中心內跨度。對於內跨度：

span.text-content span { 
    position: absolute; 
    top: 50%; 
    left: 0; 
    width: 100%; 
    margin-top: -12px; 
    text-align: center; 
}

文本在懸浮層很短，所以我們可以預期，它永遠不會換行。這意味着使用頂部：50％與matgin-top減去文本高度的一半對於垂直居中是可以的。

另外，您最好在處設置display: inline-block，因爲移動設備上的第一張圖片上存在重疊寬度問題。

來源

2014-10-01 00:48:55 Anarion

似乎工作。唯一的問題是，一旦我點擊了手機顯示屏，文字就不會出現在三張圖像中的第一張圖像的中間，現在這個圖像位於最前面。我認爲這是因爲文字高於div，而不一定是較小的圖像。所以我只需要調整我想的圖像寬度。 – 2014-10-03 03:34:09

多次嘗試後，我來給你一個可能的解決方案。您span.text-content使用這個CSS：

display: block; 
height: 0 !important; 
position: absolute; 
top: 0; 
bottom: 0; 
left: 0; 
right: 0; 
margin: auto; 
line-height: 0; 
text-align: center;

，解開你的文字了其span的，所以你只需要你的span.text-content

基本上裏面的裸體文本時，margin: auto使瀏覽器解決衝突height屬性（ 100％通過top: 0;和bottom: 0;給出和height: 0;並使用指定的高度（在此爲0）和居中的容器內從指定的位置

PS：該!important僅僅是爲了覆蓋你硬編碼的高度。

來源

2014-10-01 00:16:29

無法獲得HTML文本以保持響應式佈局中div的居中位置

回答

相關問題