Vertically Centering an img within an a tag within a div

Question

I'm trying to vertically center an image in a div in an <a> tag but I can't get the CSS to vertically center the image for the life of me.

div {
  height: 7rem;
  width: 90%;
  text-align: center;
  margin: 1.25rem auto;
  padding: 0 5.5rem 0 5.5rem;
  font-size: .8rem;
  border-style: solid;
  border-width: .08rem;
}
div * {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}
div img {
  width: 4rem;
}
div div {
  margin: 0 auto;
  width: 4rem;
  height: 100%;
}

<div class="footer">
  <div id="footerhome">
    <a href="https://www.google.com">
      <img src="http://images.clipartpanda.com/smiley-face-transparent-background-tumblr_mdv6nltwdB1qdic05o1_500.gif" />
    </a>
  </div>
</div>

This is what I'm currently working with: http://codepen.io/SamanthaBae/pen/LRomdr

I've tried the solution of making the image the background image of the div it's contained in and inserting the <a> tag in between, but it doesn't seem to work as a link, even though I can get it to vertically align:

I have checked here and here as resources, but have not been able to apply their methods in this case.

The problem is related to the `div *` rule. What is the purpose of that? If there is no purpose, remove it and that will solve most of the problem but not all. If it's needed, then that's a different can of worms. — Rob, Oct 28 '16 at 11:51

markoffden · Answer 1 · 2016-10-28T11:43:18.607

There is one old hack for this if you don't want to deal with flexbox. In short, you should implement table-like semantics for your mark-up with display: table and display: table-cell rules:

.footer {
    display: table;
}

#footerhome {
    display: table-cell;
    vertical-align: middle;
}

UPD

Following your updated code:

#footerhome {
    display: table;
}

a {
    display: table-cell;
    vertical-align: middle;
    height: // some fixed height
}

score 0 · Answer 2 · edited Jun 20 '20 at 09:12

0

There are multiple possibilities for centering images vertically. Other possible solutions can be found here

I used display:flexbox here.

#footerhome {
display: flex;
align-items: center;
}

Here's a codepen http://codepen.io/Maharkus/pen/ozRyNK

edited Jun 20 '20 at 09:12

Community

1
1

answered Oct 28 '16 at 11:41

Maharkus

2,841
21
35

score 0 · Accepted Answer · answered Oct 28 '16 at 11:42

You should to replace this line:

.footer * {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}

With this code:

.footer #footerhome, .footer a  {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}
.footer a {
    display: block;
}

Your problem start when you align all child to their parents.

score 0 · Answer 4 · answered Oct 28 '16 at 11:50

What you were going for was something like this. You'll notice I've added the positioning styles to the <img> again.

div {
  height: 7rem;
  width: 90%;
  text-align: center;
  margin: 1.25rem auto;
  padding: 0 5.5rem 0 5.5rem;
  font-size: .8rem;
  border-style: solid;
  border-width: .08rem;
}
div div {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  margin: 0 auto;
  width: 4rem;
  height: 100%;
}
div img {
  width: 4rem;
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

<div class="footer">
  <div id="footerhome">
    <a href="https://www.google.com">
      <img src="http://images.clipartpanda.com/smiley-face-transparent-background-tumblr_mdv6nltwdB1qdic05o1_500.gif" />
    </a>
    </div

But if I were you I'd do something like this, which uses flexbox and calls the elements by their classes/ids

#footerhome,
.footer {
  box-sizing: border-box;
  padding: 0 5.5rem;
  border-style: solid
}

.footer {
  height: 7rem;
  width: 90%;
  margin: 1.25rem auto;
  font-size: .8rem;
  border-width: .08rem
}

#footerhome {
  width: 4rem;
  height: 100%;
  display: flex;
  justify-content: center;
  margin: 0 auto;
  align-items: center;
  border-width: 0 .08rem
}

#footerhome img {
  width: 4rem
}

<div class="footer">
  <div id="footerhome">
    <a href="https://www.google.com">
      <img src="http://images.clipartpanda.com/smiley-face-transparent-background-tumblr_mdv6nltwdB1qdic05o1_500.gif" />
    </a>
  </div>
</div>

Vertically Centering an img within an a tag within a div

4 Answers4