How Can I centre the Social Icons at the Bottom of the Page - HTML

Question

I am trying to centre the social icons at the bottom of the page in the middle, However I cannot seem to get it right:

I have tried using display:block, inline etc and nothing seems to be working in order to get the social images to center horizontally in the middle and then position at the bottom of the page.

Code:

.socialIcons img {
  height: 50px;
  width: 50px;
  opacity: 0.4;
  filter: alpha(opacity=40);
  margin-right: 10px;
}
.icons img {
  position: relative;
  display: inline;
  margin-right: 0 auto;
  margin-left: 0 auto;
}

.socialIcons img:hover {
  opacity:1;
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Arshdeep Soni</title>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, inital-scale=1">

    <link rel="stylesheet" type="text/css" href="reset.css">
  </head>

  <body>
    <div class="header">
      <ul>
        <li><a href=#>HOME</a></li>
        <li><a href=#>VIDEOS</a></li>
        <li><a href=#>IMAGES</a></li>
        <li><a href=#>TESTIMONIALS</a></li>
        <li><a href=#>CONTACT</a></li>

      </ul>
    </div>
    <div class="icons">
      <a class="socialIcons" href="http://www.pixelfrau.com/feed" title="Subscribe to Pixel Frau" alt="Pixel Frau RSS Icon"><img src="youtube.png" /></a>
      <a class="socialIcons" href="http://twitter.com/PixelFrau" title="Follow Pixel Frau on Twitter" alt="Pixel Frau Twitter Icon"><img src="twitter.png" /></a>
      <a class="socialIcons" href="http://www.facebook.com/PixelFrau" title="Like Pixel Frau on Facebook" alt="Pixel Frau Facebook Icon"><img src="fb.png" /></a>
      <a class="socialIcons" href="http://www.youtube.com" title="Subscribe on YouTube" alt="Arshdeep on YouTube"><img src="youtube.png"/></a>
    </div>
  </body>
</html>

possible duplicate of [How to align a
to the middle of the page](http://stackoverflow.com/questions/953918/how-to-align-a-div-to-the-middle-of-the-page) — Andrew T., May 13 '15 at 11:21

score 1 · Answer 1 · answered May 13 '15 at 11:22

1

You need to center parent element, not icons.

.icons {display: table; margin: 0 auto;}

https://jsfiddle.net/av8wadwh/

answered May 13 '15 at 11:22

pavel

26,538
10
45
61

How can i position at the bottom of the screen? – RandomMath May 13 '15 at 11:24
For example, `.icons {position: absolute; bottom: 0; left: 0; width: 100%; text-align: center;} .icons a, .icons img {text-align: center;}`, https://jsfiddle.net/av8wadwh/1/ – pavel May 13 '15 at 11:29

Dmitriy · Answer 2 · 2015-05-13T11:33:35.553

use text-align: center; for .icons

.icons{
    text-align: center;
   position: absolute; bottom: 10px; left: 0;
   width: 100%;
}
.socialIcons img {
                    height: 50px;
                    width: 50px;
                    opacity: 0.4;
                    filter: alpha(opacity=40);
                    margin-right: 10px;
                }
                .icons img {
                    position: relative;
                    display: inline;
                    margin-right: 0 auto;
                    margin-left: 0 auto;
                }

                .socialIcons img:hover {
                    opacity:1;
                }

<div class="header">
            <ul>
                <li><a href=#>HOME</a></li>
                <li><a href=#>VIDEOS</a></li>
                <li><a href=#>IMAGES</a></li>
                <li><a href=#>TESTIMONIALS</a></li>
                <li><a href=#>CONTACT</a></li>

            </ul>
        </div>
            <div class="icons">
        <a class="socialIcons" href="http://www.pixelfrau.com/feed" title="Subscribe to Pixel Frau" alt="Pixel Frau RSS Icon"><img src="youtube.png" /></a>
<a class="socialIcons" href="http://twitter.com/PixelFrau" title="Follow Pixel Frau on Twitter" alt="Pixel Frau Twitter Icon"><img src="twitter.png" /></a>
<a class="socialIcons" href="http://www.facebook.com/PixelFrau" title="Like Pixel Frau on Facebook" alt="Pixel Frau Facebook Icon"><img src="fb.png" /></a>
<a class="socialIcons" href="http://www.youtube.com" title="Subscribe on YouTube" alt="Arshdeep on YouTube"><img src="youtube.png"/></a>
            </div>

That doesnt place at the bottom of the screen? – RandomMath May 13 '15 at 11:30 — RandomMath, May 13 '15 at 11:30

score 0 · Answer 3 · answered May 13 '15 at 11:47

0

Centre the icons by adding the following css: .icons { width: 10em; margin: 0 auto; }

answered May 13 '15 at 11:47

Helene Tveiten

1
2

How Can I centre the Social Icons at the Bottom of the Page - HTML

3 Answers3