CODEWITHSUNDEEP
csshtml
Banshee
Banshee

Reputation: 15827

How to get img Vertical middle?

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.

Upvotes: 1

Views: 77

Answers (3)

imnancysun
imnancysun

Reputation: 632

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>

Upvotes: 1

Roger
Roger

Reputation: 3256

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;
}

Upvotes: 0

Austin Collins
Austin Collins

Reputation: 451

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;
}

Upvotes: 1

Related Questions