CODEWITHSUNDEEP
cssiconsfooter
dosebot
dosebot

Reputation: 121

Centering social media icons in footer of website

Im fairly new to the world of CSS and HTML, so my apologies in advanced.

I am having a problem getting my social media icons to center themselves at the bottom of my website. They are sitting bottom heavy rather in the middle of the footer. Attached is screen shot of the issue and the code behind it.

Image of current footer

CODE SNIPPET:

.page-footer {
  background-color: #F06D71;
  padding: 1em;
}
<footer class="page-footer">
  <ul>
    <img class="responsive-img" src="http://placehold.it/50x50">
    <img class="responsive-img" src="http://placehold.it/50x50">
    <img class="responsive-img" src="http://placehold.it/50x50">
  </ul>
</footer>

I've attempted to add "padding-bottom" to the style sheet, but the icons just get smaller rather moving up a few pixels.

Any advice or any terms i should look into?

Regards

Upvotes: 0

Views: 7836

Answers (4)

Neil K
Neil K

Reputation: 1328

Use Flexbox:

.page-footer{
 display:flex;
}

.page-footer ul{
 align-items:center;
}

This will center the icons vertically inside the footer. You also should have the images wrapped in <li> tags within the list as list items. If you also want to nicely center them vertically you could add display: inline-block to the list elements and text-align center to its parent, the unordered list. So the final code would be:

.page-footer{
  display:flex;
}

.page-footer ul{
  justify-content:center;
  text-align:center;
}

.page-footer ul li{
  display:inline-block;
 }

Also one more thing I noticed, you have added the same ID to all three images. An ID should be a unique identifier and only used on one element.

Upvotes: 1

Dana Filimon
Dana Filimon

Reputation: 1

It is not always obvious even for an experienced developer. If you want to have just images in your footer you could just do padding. Also you have missing <li> inside <ul> tag. Here is an example:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <style>
    .footer-list-item {
      list-style-type: none;
      display: inline-block;
    }

    .footer-list {
      padding: 50px 0;
      background: pink;
      text-align: center;
    }
  </style>
</head>
<body>
  <div class="footer">
    <ul class="footer-list">
      <li class="footer-list-item"><img width="50" src="https://static.jsbin.com/images/dave.min.svg" alt="Welcome to JS Bin"></li>
      <li class="footer-list-item"><img width="50" src="https://static.jsbin.com/images/dave.min.svg" alt="Welcome to JS Bin"></li>
      <li class="footer-list-item"><img width="50" src="https://static.jsbin.com/images/dave.min.svg" alt="Welcome to JS Bin"></li>
    </ul>
  </div>
</body>
</html>

JSBin link

Upvotes: 0

Jesse Elser
Jesse Elser

Reputation: 976

Simple solution:

For the class of .page-footer add a property of display: table;

Then wrap your image tags in a <div> and assign the property of display: table-cell to the div and also the property of vertical-align: middle;.

Doing this will vertically align anything inside that div to the middle of the element.

See this JsFiddle that I made as a demonstration.

Upvotes: 0

pa7ryk
pa7ryk

Reputation: 551

Here is a great tool to do that.

Upvotes: 0

Related Questions