CODEWITHSUNDEEP
htmlcsscss-position
user29329
user29329

Reputation: 5

Positioning two elements in css

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

I have two images. A logo and a loading image. I need position logo at centre horizontally and vertically and loader at centre at the bottom of page. My CSS is this:

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

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

I'm able to get both images at centre by this code. But I don't need to have loader at same position with logo. I need it to be at the end of page without affecting the position of logo. How to do it?

Upvotes: 0

Views: 88

Answers (2)

Shiva Avula
Shiva Avula

Reputation: 1836

If you want it at end of page try using the float:right on loader img, so it will be displayed at the end of the row. If you want to show the loader below logo, use a br after logo img.

If you want to center the logo to whole page and display loader at right bottom of page, you can apply the 'vertical-align:middle' to logo and 'vertical-align:bottom;float:right' to loader.

Hope this helps.

Upvotes: 0

James Monger
James Monger

Reputation: 10665

I had a bit of trouble understanding what exactly you wanted, but this code should align the logo to the center (vertically and horizontally) and the loading icon to the bottom, centrally aligned horizontally.

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;
}

Upvotes: 1

Related Questions