How to get img Vertical middle?

Question

I have the following code

.topic {
  float: left;
  width: 500px;
}
.topic .tInfo {
  float: left;
  width: 460px;
}
.topic .tName {
  width: 460px;
}
.topic .tTime {
  width: 460px;
}
.topic .tUImgLnk {
  width: 400px;
  height: 400px;
  float: left;
  background-color: red;
}
.topic .tUImgLnk .tUImg {
  margin: 0px auto;
  display: block;
  vertical-align: middle;
}

<div class="topic" data-reactid=".yvg4g1tbeo.0.$1">
  <div class="tUImgLnk" data-reactid=".yvg4g1tbeo.0.$1.0">
    <a title="test" target="_blank" href="http://www.test.net" data-reactid=".yvg4g1tbeo.0.$1.0.0">
      <img class="tUImg" src="http://www.easyvectors.com/assets/images/vectors/vmvectors/dekstop-computer-vector-26.jpg" data-reactid=".yvg4g1tbeo.0.$1.0.0.0">
    </a>
  </div>
</div>

How do I get it vertical middle? I have tried to set the container to vertical-align:middle but that does not help.

The reason that the vertical-align:middle is not working is probably the display block on the image. But If I remove that, then the center will not work. I am hoping that HTML5 could solve this problem without a table and A LOT of css. — Banshee, Feb 19 '15 at 22:45
Have a look at [this topic](http://stackoverflow.com/questions/18516317/vertically-align-an-image-inside-a-div-with-responsive-height/); I'm pretty sure that you'll find a way that fits your needs. — Hashem Qolami, Feb 19 '15 at 22:48
Wild guess: Middle vertically centers in the parent element. The parent is the anchor tag of unspecified height and unspecified vertical-align, no? — Mic, Feb 19 '15 at 22:49

score 1 · Answer 1 · answered Feb 19 '15 at 22:50

1

Give 'topic' the image as a background, as you have the link covering the div it shouldn't be a problem.

http://jsfiddle.net/q3x1Lmzg/1/

.topic .tUImgLnk {
  width: 400px;
  height: 400px;
  float: left;
  background: url(http://www.easyvectors.com/assets/images/vectors/vmvectors/dekstop-computer-vector-26.jpg) no-repeat ;
    background-position: center;
    background-size: 350px;
    background-color:red;
}

answered Feb 19 '15 at 22:50

Austin Collins

439
3
13

The image src is set from the server so this is a no go. – Banshee Feb 20 '15 at 08:33

score 1 · Accepted Answer · answered Feb 19 '15 at 23:00

1

Try the follow, with top/left setting and transform.

.topic {
  float: left;
  width: 500px;
}
.topic .tInfo {
  float: left;
  width: 460px;
}
.topic .tName {
  width: 460px;
}
.topic .tTime {
  width: 460px;
}
.topic .tUImgLnk {
  width: 400px;
  height: 400px;
  float: left;
  background-color: red;
}
.topic .tUImgLnk .tUImg {
  margin: 0px auto;
  display: block;
  }

.tUImgLnk {
   position: relative;     
  }

.tUImg {
  top: 50%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
  position: absolute;  
}

<div class="topic" data-reactid=".yvg4g1tbeo.0.$1">
  <div class="tUImgLnk" data-reactid=".yvg4g1tbeo.0.$1.0">
    <a title="test" target="_blank" href="http://www.test.net" data-reactid=".yvg4g1tbeo.0.$1.0.0">
      <img class="tUImg" src="http://www.easyvectors.com/assets/images/vectors/vmvectors/dekstop-computer-vector-26.jpg" data-reactid=".yvg4g1tbeo.0.$1.0.0.0">
    </a>
  </div>
</div>

answered Feb 19 '15 at 23:00

imnancysun

612
8
14

It looks like it is 1 px off? The left and right bordet are not the same size. In you case it could be that the width is not even split by 2 but when I fix this in my own example it is still not working? The left side always gets 1 pix to much. – Banshee Feb 20 '15 at 08:42
@Banshee your pic is 350*343, your .tUImgLnk div is 400*400, how could you precisely vertically center it? – imnancysun Feb 20 '15 at 17:17
You are correct, but I can change the size of the parent to fit. Pleas take a look at this example, this is closer to what I have : http://jsfiddle.net/w9cLw3y0/ you can see that the right margin is 3 and left is 5. The image should be placed 1 px to the left. – Banshee Feb 20 '15 at 17:52
the image doesn't load for some reason. – imnancysun Feb 20 '15 at 17:58
The CSS left property is based on the size of the parent element (.tUImgLnk 43px). The transform property is based on the size of the target element (.tUImg 35px). Since both of them have odd number, that's why the calculation is a bit off. In this case, you need to go with other ways to center it. – imnancysun Feb 20 '15 at 18:27
After some more testing, this will do fine, I change the image size instead to something fitting. Thanks! – Banshee Feb 20 '15 at 20:23

score 0 · Answer 3 · answered Feb 19 '15 at 22:58

2 really simple solutions.

more complex (but simple): JSFiddle

/*Table takes everything inside it and lays it out on a grid.*/
.table {
    background-color:red;
    height:400px;
    width:400px;
    text-align:center;
    display: table;
}
/*each cell is positioned by the table to be vertical aligned */
.cell {
    display: table-cell;
    vertical-align: middle;
}

really simple: JSFiddle

/*just add padding*/
 .pad {
    display:inline-block;
    background-color:red;
    padding: 30px;
}

First solution is a table solution and I was hoping to avoid this with HTML5. The second sugests that the image are always of the same size but this is not the case. — Banshee, Feb 20 '15 at 08:34

How to get img Vertical middle?

3 Answers3