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

我有两张图片。徽标和加载图像。我需要将徽标水平和垂直放置在中心，并将加载器放置在页面底部的中心。我的 CSS 是这样的：

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

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

我可以通过此代码将两个图像都放在中心。但我不需要将装载机与徽标放在同一位置。我需要它在页面末尾而不影响徽标的位置。怎么做？

4

2 回答 2

1

我在理解您到底想要什么时遇到了一些麻烦，但是这段代码应该将徽标对齐到中心（垂直和水平），并将加载图标对齐到底部，水平居中对齐。

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-07T13:55:11.760 回答
0

如果您希望它在页面末尾，请尝试在加载程序 img 上使用 float:right，这样它将显示在行尾。如果要在徽标下方显示加载程序，请在徽标 img 后使用 br。

如果要将徽标居中于整个页面并在页面右下方显示加载器，您可以将“vertical-align:middle”应用于徽标，将“vertical-align:bottom;float:right”应用于加载器。

希望这可以帮助。

于 2013-08-07T14:10:38.073 回答