How can an image of unknown size be centered within a div of known size?
I'm trying to centre an image of unknown size within a div of known size, such that the image is centered both vertically and horizontally within the div and the aspect ratio of the image is not distorted.
Here's an example
This code almost does the job but both images look shifted down slightly... by maybe a couple of pixels. Why?
The HTML;
<body>
<div class="container" id="c1">
<img src="test.jpg"/>
</div>
<div class="container" id="c2">
<img src="test.jpg"/>
</div>
</body>
The CSS;
.container {
text-align: center; /* Center the image horizontally */
margin: 1em; /* Just for looks */
background: red; /* Just for looks */
}
.container img {
vertical-align: middle; /* See note below */
max-height: 100%; /* Limit the image size to fit the container */
max-width: 100%; /* Limit the image size to fit the container */
}
#c1 {
width: 8em;
height: 4em; /* See note below */
line-height: 4em; /* See note below */
}
#c2 {
width: 5em;
height: 7em; /* See note below */
line-height: 7em; /* See note below */
}
Note: The image is vertically centered within the container by making the line-height of the container the same as the height of the container, and applying {vertical-align: middle;} to the image. This should vertically center the image within the container and it almost works, except that the image is always two pixels too low.
I've tried doing 开发者_如何学C* {margin:0; padding:0} and several reset.css files but still the image appears to be shifted down a bit.
So my question is really two questions;
- How can an image of unknown size be centered within a div of known size?
- Why is there a small gap between the img and the edge of the div?
Regards, a CSS newbie.
The easiest way I could come up with is to use jQuery:
$(document).ready(
function(){
$('img').each(
function(){
var imgHeight = $(this).height()/2;
var imgWidth = $(this).width()/2;
var div = $(this).parent();
var divHeight = div.height()/2;
var divWidth = div.width()/2;
$(this).css(
{
'top':divHeight - imgHeight,
'left':divWidth - imgWidth
});
});
});
I'm not, however, convinced that this is the most streamlined way. On the plus side, though, it works: JS Fiddle Demo.
You can do this with CSS3 and the flexible box model if you don't mind some browser inconsistencies:
HTML
<div id="container">
<div id="one">One</div>
</div>
CSS
#container {
background: rgb(230,230,230);
display: -moz-box; -moz-box-orient: horizontal; -moz-box-pack: center; -moz-box-align: center;
display: -webkit-box; -webkit-box-orient: horizontal; -webkit-box-pack: center; -webkit-box-align: center;
height: 500px;
width: 500px;
}
#container #one {
background: rgb(200,200,200);
padding: 15px;
}
Example: http://jsfiddle.net/brandondurham/q7feV/
You should know the image's width to place it to center, using margin: auto CSS property of the div. I guess the javascript is the only solution for your problem if its width is unknown
Use "margin:auto;" on the image to center it horizontally within the div.
To center vertically "vertical-align" won't work. If the containers are positioned elements you could use "top:50%" "margin-top: - (half the height of the image)" but since you don't know the height you will need to calculate it using javascript.
On image's onload event you should take its width and height then resize the image keeping aspect ratio then centeralize the image using JavaScript.
Please check the following example that I've done previously for test purpose.
Proportional image resize on image load and displays a loading gif until image load
加载中,请稍侯......
精彩评论