How to vertically align image

Question

I am attempting to vertically align an image in a div, but everything I try won't work.

I am attempting to center it in a material design lite cell.

Here is my code:

HTML:

<div class="mdl-grid">
  <div class="mdl-cell mdl-cell--4-col">
  a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>
  </div>
  <div class="mdl-cell mdl-cell--4-col">
    <div class="imgholder">
    <img src="https://i.stack.imgur.com/kq8EX.png" id="stackimg">
    </div>
  </div>
</div>

CSS:

.mdl-cell{
  border: 1px solid black;
}
.imgholder{
  width: 100%;
  height:100%;
}
#stackimg{
  width:50%;
  float: right;
  position: reletive;
  top:50%;
  vertical-align: middle;
}

Vertical-align: middle isn't doing anything. Neither is top: 50%. The image does have a parent div with a defined height, so I'm not sure why it's not working.

Any help is appreciated.

it won't fix your problem, but mind your spelling - relative, not reletive — kinakuta, Aug 08 '16 at 20:57
A great guide for centering in CSS, should fix all your problems: https://css-tricks.com/centering-css-complete-guide/ — Remco van Os, Aug 08 '16 at 21:04
@RemcovanOs Already saw that before posting. None of the methods worked for me. See the codepen linked in the OP — quantumbutterfly, Aug 08 '16 at 21:09
@quantumbutterfly I need to center: Vertically - block-level element - unknown height (percentage counts as unknown) - Works in the CodePen — Remco van Os, Aug 08 '16 at 21:15

Hunter Turner · Accepted Answer · 2016-08-08T21:10:28.433

4

You can vertically center your image by using translateY(). Give your container a position: relative; and then assign position: absolute; along with transform: translateY(-50%); to your image.

CSS

.imgholder{
  width: 100%;
  height: 100%;
  position: relative;
}

#stackimg{
  width: 50%;
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
}

CodePen

edited Aug 08 '16 at 21:10

answered Aug 08 '16 at 21:04

Hunter Turner

6,804
11
41
56

Or if you want the image to keep `position: relative` add a `left: 50%` and the `transform` – Remco van Os Aug 08 '16 at 21:06

Bharthan · Answer 2 · 2016-08-08T20:59:59.713

0

Vertical align your div containing image instead of the img tag itself, or check this:

> `http://jsfiddle.net/kizu/4RPFa/4570/`

edited Aug 08 '16 at 20:59

answered Aug 08 '16 at 20:54

Bharthan

1,458
2
17
29

http://stackoverflow.com/questions/7273338/how-to-vertically-align-an-image-inside-div – Bharthan Aug 08 '16 at 21:01
I've already seen and tried that. That's not working either. I suspect the css for mdl is somehow interfering – quantumbutterfly Aug 08 '16 at 21:02

How to vertically align image

2 Answers2