在css中定位兩個元素

<div id="homeScreen"> 
    <div id="homeWrapper"> 
     <img src="logo.png" alt="logo-icon"/> 
     <img src="ajaxloader.gif" alt="loading.." id="loader"/> 
    </div> 
</div>

我有兩個圖像。一個標誌和一個加載圖像。我需要在中心水平和垂直位置標誌和位於頁面底部中心的加載器。我的CSS是這樣的：在css中定位兩個元素

#homeScreen 
{ 
    background: #d1d1d1; 
    width: 100%; 
    height: 100%; 
    display: table; 
} 

#homeWrapper 
{ 
    display: table-cell; 
    vertical-align: middle; 
    text-align: center; 
}

我能夠通過此代碼獲得兩個圖像在中心。但我不需要在徽標的相同位置安裝裝載機。我需要它在頁面的結尾處，而不會影響徽標的位置。怎麼做？

來源

2013-08-07 user29329

有點困惑你說的「頁尾」你的意思是這樣的http://jsfiddle.net/vEZzS/ – defaultNINJA

OP：你解決了你的問題嗎？請[接受答案]（http://stackoverflow.com/help/accepted-answer）如果有的話 –

我在理解你想要什麼時遇到了一些麻煩，但是這個代碼應該將徽標對齊到中心（垂直和水平）和加載圖標到底部，水平居中對齊。

HTML：

<div id="homeScreen"> 
    <div id="homeWrapper"> 
     <div id="logo"><img src="logo.png" alt="logo-icon" width="150" height="150"/></div> 
     <div id="loading"><img src="ajaxloader.gif" alt="loading.." id="loader" width="30" height="30"/></div> 
    </div> 
</div>

CSS：

#homeScreen 
{ 
    background: #d1d1d1; 
    width: 100%; 
    height: 100%; 
    display: table; 
} 

#logo 
{ 
    margin: 0 auto; 
    width:150px; 
    height:150px; 
    position:absolute; 
    left:50%; 
    top:50%; 
    margin:-75px 0 0 -75px; 
} 

#loading 
{ 
    position: absolute; 
    bottom: 0; 
    left: 50%; 
    margin-left: -15px; 
    width: 30px; 
    height: 30px; 
}

來源

2013-08-07 13:55:11

不起作用。 http://jsfiddle.net/vEZzS/1/測試你的代碼在小提琴如果你不知道。 – defaultNINJA

@defaultNINJA道歉，我修復了它，現在它工作正常。 –

如果你想要在頁面的末端嘗試使用浮動：正確的裝載機IMG，所以它會在的末尾顯示行。如果您想在徽標下方顯示加載器，請使用徽標img後面的br。

如果要將徽標居中放在頁面右下角的整個頁面和顯示加載器中，可以將「vertical-align：middle」應用於徽標，將「vertical-align：bottom; float：right」應用於裝入器。

希望這會有所幫助。

來源

2013-08-07 14:10:38

在css中定位兩個元素

回答

相關問題