在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中定位两个元素

回答

相关问题