CODEWITHSUNDEEP
css
Pádraic
Pádraic

Reputation: 3

How to center images in a footer

Novice here! I'm looking to adjust some code for this site: http://www.lakeofstars.org

The footer area at the base of each page contains a series of logos. The ideal is to ensure that the logo images in the footer display correctly on mobile (if they are too large, some of the logos drop down below the designated footer background), but also to get them to center correctly on desktop - as you'll see, they are currently nudged to the left.

Here's the code as it stands:

#footer {
    position:absolute;
    bottom:0;
    width:100%;
    height:140px;           /* Height of the footer */
    background:#ffffff;
    border-top: solid 3px #ffc600;
    background-image:url(img/global/footer.gif);
    background-repeat: repeat-x;
    background-position:bottom;
}


#footer .structure {
    height: 140px;
    width: 94%;
}

#footer .structure li {
    display: inline-block;
    margin: 10px 10px 0 0;
    float: left;
}

#footer .structure li img {
    height: 65px;
    width: auto;
}

Upvotes: 0

Views: 5398

Answers (4)

Muthu
Muthu

Reputation: 86

Remove width:auto ... give values in percentage....

#footer .structure li img

Upvotes: 0

Dmitriy
Dmitriy

Reputation: 4503

add for #footer .structure ul - text-align: center;

remove for #footer .structure li - float: left

#footer .structure ul {
   text-align: center; < -- add
}
#footer .structure li {
    display: inline-block;
    vertical-align: middle;
    margin: 10px 10px 0 0;
   /* float: left;*/ <-- remove

}

Upvotes: 0

Philip Dernovoy
Philip Dernovoy

Reputation: 1179

You need to remove float: left; from #footer .structure li.
Try to use line-height and vertical-align: middle; for vertical aligment and text-align: center; for horizontal:

#footer .structure {
    text-align: center;
}
#footer .structure ul {
    line-height: 140px;
    vertical-align: middle;
}
#footer .structure li {
    display: inline-block;
}

Or you can use flexbox technique

Upvotes: 1

Duc Nguyen
Duc Nguyen

Reputation: 474

#footer {
    position:absolute;
    bottom:0;
    width:100%;
    height:140px;
    background:#ffffff;
    border-top: solid 3px #ffc600;
    background-image:url(img/global/footer.gif) scroll 50% 50%;
    background-repeat: repeat-x;
    background-position:bottom;
}

Upvotes: 0

Related Questions