CODEWITHSUNDEEP
htmlcss
Arvin
Arvin

Reputation: 1014

Responsive image is anchoring at the top of its cotainer div

I'm developing a webpage for mobile devices, in which I need to preview some images. The issue facing is when ever I change(decrease) the width of the window (obviously the image resizes and its height reduces keeping the aspect ratio) the image is sticking on the top of the div in which the image control is placed.The css property vertical-align:middle; is not working for this div.Also tried using line-height property which is also not working.I need to align the image vertically centre

enter image description here

My markup is is

<div id="dvImgPreview" class="imagePreview" style="display:block;" runat="server">                       
      <asp:Image ID="ImgIPreview" runat="server" ImageUrl="" />
</div>

and css used for this is

.imagePreview{text-align:center;vertical-align:middle; margin:10px 10px 5px 10px;height:410px;background-color:#000;}
.imagePreview img{max-width:100%;}

The height of the div needed to be fixed as 410px

Upvotes: 0

Views: 37

Answers (2)

user25312
user25312

Reputation: 307

Since you have a height defined you can use

.imagePreview img{
    margin: auto;
    position: absolute;
    top: 0; bottom: 0; left: 0; right: 0;
}

Don't forget to declare position:relative; on .imagePreview

Fiddle

Upvotes: 1

Abhishek Yadav
Abhishek Yadav

Reputation: 41

try padding style instead of vertical-align as "padding:50% 0;"

Upvotes: 0

Related Questions