CODEWITHSUNDEEP
htmlcss
Anandh
Anandh

Reputation: 77

Vertically center an image inside div

I need to position the image to center vertically inside the div. Could you help me on this. Below is my tried snippet.

<html>
<body>
<div style="width:190px;height:100%;">
<img src="sample.jpg" width="190px" height="190px"/>
</div>
</body>
</httml>

sample image

Upvotes: 0

Views: 69

Answers (4)

Kardaw
Kardaw

Reputation: 401

FIDDLE - An other way:

<style>
  #Image{
    width: 190px;
    height: 100%;
    background-image: url(sample.jpg);
    background-position: center;
    background-repeat: no-repeat;
  }
</style>
<body>
     <div id="Image"/>
</body>

Upvotes: 0

jungerislaender
jungerislaender

Reputation: 302

http://jsfiddle.net/9kn5N/

<div style="width:500px;height:500px;border:1px solid #000; text-align: center;">
<img src="https://i.sstatic.net/PbkUt.jpg" width="190px" height="190px" style="margin-top: calc(50% - 95px);"/>
</div>

Upvotes: 0

user3588539
user3588539

Reputation:

HTML

<div>
   <img src="https://i.sstatic.net/PbkUt.jpg" width="190px" height="190px"/>
</div>

CSS

div{
    height:400px;
    width:190px;
    background-color:grey;
    display:table-cell;
    vertical-align:middle;
}

Check this fiddle http://jsfiddle.net/x5TK4/

Upvotes: 3

Aaroniker
Aaroniker

Reputation: 190

<html>
<body>
<div style="width:190px;height:100%;position:relative;">
<img src="sample.jpg" style="height:190px; width:190px; position:absolute; margin:-95px 0 0 -95px; left:50%; top:50%;" />
</div>
</body>
</html>

jsfiddle: http://jsfiddle.net/v6R5J/2/

Upvotes: 0

Related Questions