CODEWITHSUNDEEP
htmlcsscss-position
user2310422
user2310422

Reputation: 555

How to center image vertically?

I am looking for a way to center the image vertically, something that is similar to text-align center. text-align center is kinda efficient since you don't need to specify the width of the parent or the width of the children, it will automatically center its content. Is there any other way to do something like this for positioning image vertically?

Upvotes: 3

Views: 509

Answers (5)

Vandervals
Vandervals

Reputation: 6054

The solution you've got works for old browsers but in the near future (right now has like the 70% of the browser support) you can do this, a much simpler and elegant solution:

.container img{
  width: 100%;
  height: auto;
}
@supports(object-fit: cover){
    .container img{
      height: 100%;
      object-fit: cover;
      object-position: center center;
    }
}

Upvotes: 0

Daniel
Daniel

Reputation: 4946

All in the middle ... 

<div id="container">
    <div id="img"></div>
</div>

#container {
    position: relative;
    width:200px;
    height:200px;
    background:#040;
}
#container #img {
    background: url("url_to_image.jpg") no-repeat center center;
    position:absolute;
    top:0;
    bottom:0;
    left:0;
    right:0;
}

http://jsfiddle.net/djwave28/PD6J4/

Upvotes: 0

ShujatAli
ShujatAli

Reputation: 1376

in a parent div id parentDiv .. set image on background

#parentDiv
{
background:url(image.png) no-repeat center center;
height:500px;
width:500px;
}

or in child div do this thing... 

position:absolute;
   top:50%;

Upvotes: 0

Mr. Alien
Mr. Alien

Reputation: 157284

You can do it in 2 ways

Way 1 (Preferred), by using display: table-cell

div {
    display: table-cell;
    height: 100px;
    border: 1px solid #f00;
    vertical-align: middle;
}

Demo

Way 2, Using position: absolute; and top: 50% and than deduct 1/2 of the total height of the image using margin-top

div {
    height: 100px;
    border: 1px solid #f00;
    position: relative;
}

div img {
    position: absolute;
    top: 50%;
    margin-top: -24px; /* half of total height of image */
}

Demo 2

Upvotes: 4

Imtiaz Zaman Nishith
Imtiaz Zaman Nishith

Reputation: 490

div{
    display:table-cell;
    vertical-align:middle;
}

Upvotes: 0

Related Questions