水平對齊圖片和文字？

在網頁開發中採取嬰兒步驟。我有一個應用程序有一個非常類似於this Fiddle的加載器屏幕。水平對齊圖片和文字？

在桌面瀏覽器上，縱向和橫向居中（無論如何），文本/圖像看起來都可以接受。

但是，當您在較小的屏幕尺寸上查看我的應用程序時，文本/圖像開始與屏幕中心水平對齊。

我一直在閱讀許多相關的文章和博客，但無法讓我的文本/圖像保持居中，無論設備寬度如何。這可以通過調整fiddle預覽以使其更細化來複制。

<div id="preloader"> 
<div class="preloaderContent"> 
    <div id="loadLabel">Please Wait</div> 
    <img src="http://www.igfa.org/images/throbber.gif"><br> 
    </div> 
</div> 

#preloader { 
    display: table; 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    margin:0; 
    padding:0; 
    background:#3399FF; 
    z-index:999; 
} 

.preloaderContent { 
    position: absolute; 
    left: 45%; 
    top: 40%; 
} 

.preloaderContent img { 
    display : block; 
    margin : auto; 
    text-align: center; 
} 

#loadLabel { 
    padding-bottom: 10px; 
    font-size: 30px; 
    font-weight: 300; 
    font-family: 'Segoe UI',Helvetica,Arial,'Sans-Serif'; 
    color: #FFFFFF; 
    text-align: center; 
}

道歉，這是一個有點亂。有人能以我的方式指出錯誤嗎？

來源

2013-04-23 Simon

嘗試添加在％ – DiederikEEn 2013-04-23 09:59:28

一個邊距，您可以添加％的利潤，但我會建議你在我下面提供的是完全肯定的回答工作。 – Aslam 2013-04-23 10:00:56

您需要添加一些響應的CSS。

@media (min-width: 768px) and (max-width: 979px) { ... } 


/* Landscape phone to portrait tablet */ 
@media (max-width: 767px) { ... } 


/* Landscape phones and down */ 
@media (max-width: 480px) { ... }

通過在上述媒體查詢中添加特定的CSS，您可以修改每個設備的佈局。不要忘記把上面的媒體查詢放在你的css下面（爲了安全起見）。

希望這可以解決您的問題。

來源

2013-04-23 10:00:07 Aslam

你可以把它放在50％和50％，並添加到這個約一半的內容大小的負邊距。

jsfiddle.net/z3zpz/1/

來源

2013-04-23 10:00:37 Jakuje

你希望把這樣的事情：

.preloaderContent { 
    position: absolute; 
    left: 50%; 
    top: 50%; 
    width: 200px; 
    height: 100px; 
    margin-top: -50px;/*half of height*/ 
    margin-left: -100px;/*half of width*/ 
}

負利潤率意味着div的中心是在中心，而不是頂左角。這將根據瀏覽器窗口大小調整大小。實施例：http://jsfiddle.net/z3zpz/2/

來源

2013-04-23 10:05:56 gaynorvader

嘗試這一個

* { margin: 0; padding: 0; } 

html, body { height: 100%; } 

body { position: relative; background: #3399FF; } 

#preloader { display: table; width: 100%; height: 100%; } 

.preloaderContent { display: table-cell; vertical-align: middle; text-align: center; } 

.preloaderContent img { display : block; margin: 0 auto; } 

#loadLabel { padding-bottom: 10px; font-size: 30px; font-weight: 300; font-family: 'Segoe UI', Helvetica, Arial, 'Sans-Serif'; color: #FFFFFF; }

來源

2013-04-23 11:56:47

還可以嘗試如果高度和內容寬度（.preloaderContent）是已知的這一個。

html, body { height: 100%; } 

#preloader {position: relative; background: #3399FF; width: 100%; height: 100%; } 

.preloaderContent { position:absolute; height:100px; width:160px; top:50%; left:50%; margin-top:-50px; margin-left:-80px; }

來源

2013-04-23 12:03:56

水平對齊圖片和文字？

回答

相關問題