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

私は2つの画像を持っています。ロゴとローディングイメージ。ロゴを水平方向と垂直方向の中央に配置し、ローダーをページの下部の中央に配置する必要があります。私の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 を使用してみてください。行の最後に表示されます。ローダーをロゴの下に表示したい場合は、ロゴ画像の後に br を使用します。

ロゴをページ全体の中央に配置し、ローダーをページの右下に表示する場合は、'vertical-align:middle' をロゴに、'vertical-align:bottom;float:right' をローダーに適用できます。

お役に立てれば。

于 2013-08-07T14:10:38.073 に答える