CODEWITHSUNDEEP
asp.netcssimagehtml
Ali_dotNet
Ali_dotNet

Reputation: 3279

centering an image horizontall and vertically inside a DIV in ASP.NET

I want to display an ASP.NET image in the middle of a div (both horizontally and vertically), how should I arrange my div and image (image should be runat=server), also I should set max-width and max-height styles for my image, DIV acts as a placeholder, and my image should be inside the DIV, and it should be exactly centered both horizontally and vertically, can you show my the correct HTML and CSS? is there any sample?

Upvotes: 0

Views: 5658

Answers (2)

Abdallah Barghouti
Abdallah Barghouti

Reputation: 93

I worked REALLY HARD on finding the solution, hopeful it's 100% helpful :-)

<html>
<style>
.placeholder {
    width: 250px;
    min-width: 250px;
    height: 250px;
    min-height: 250px;
    display: block;
    margin-left: auto;
    margin-right: auto;
    position: absolute;
    left: 50%;
    top: 40%;   
    margin: -100px 0 0 -125px;
}
</style>
<IMG class="placeholder" src="http://www.swoo.co.uk/content/images/icons/stackoverflow.png">
</html>

Replace any img you want in place of the URL that equals to the "src". Note that it works also while zoom in and zoom out in the browser, it stays EXACTLY in the MIDDLE of the page, best code you could find :)

Upvotes: 0

AnchovyLegend
AnchovyLegend

Reputation: 12538

Use:

CSS

    .placeholder{min-width:200px; min-height:200px;}
    .placeholder img{
    margin: 0px auto; /*centers element horizontally*/
    vertical-align:middle; /*centers element vertically */
    }

Your html should like something like:

<div class="container">
   <div class="placeholder">
       <!-- load image here -->
   </div>
</div>

Upvotes: 1

Related Questions