Center an Image vertically and horizontally using CSS
How do I vertically and horizontally center an image when I do not know the size of it? I asked this question and someone suggested using a table. This isn't the first time I heard a table can do it but I tried without luck.
Searching SO only got me开发者_如何转开发 results when I do know the size of the image. How do I do this with a table?
NOTE: JavaScript/jQuery is not preferred but if there's a solution with it I'm open to it.
Pretty easy, this is the format of all my images/containers:
<div class="photo"><img /></div>
<style type="text/css">
div.photo { height: 100px; line-height: 100px;text-align:center; }
div.photo img { vertical-align:middle;}
</style>
The CSS Method
You can set an explicit height and line-height on your container to center an image:
<div id="container">
<img src="http://placekitten.com/200/200" />
</div>
<style>
#container { height: 600px; line-height: 600px; text-align: center }
#container img { vertical-align: middle }
</style>
See it in action: http://jsfiddle.net/jonathansampson/qN3nm/
The HTML/Table Method
The table method follows. It's merely utilizing the valign (vertical-align) property:
<table>
<tbody>
<tr>
<td align="center" valign="middle">
<img src="someHeight.jpg" />
</td>
</tr>
</tbody>
</table>
A jQuery Plugin
Since you tagged this question "jQuery," I'll provide a reference to the jQuery Center Plugin that also achieves vertical/horizontal centering by using CSS positioning and dynamic reading of an elements dimensions: http://plugins.jquery.com/project/elementcenter
With a table:
<table height="400">
<tbody>
<tr>
<td valign="middle"><img /></td>
</tr>
</tbody>
</table>
The 400 is just something I picked. You will need to define a height on table so it is taller than your image.
A jquery solution would be good if you wanted to try and use divs and junk, but if you don't care you don't care. You also have to rely on JS being turned on.
HTML:
<div id="imgContainer" style="position:relative;">
<img style="position:absolute;" />
</div>
JS:
$('#imgContainer > img').each(function(){
//get img dimensions
var h = $(this).height();
var w = $(this).width();
//get div dimensions
var div_h =$('#imgContainer').height();
var div_w =$('#imgContainer').width();
//set img position
this.style.top = Math.round((div_h - h) / 2) + 'px';
this.style.left = '50%';
this.style.marginLeft = Math.round(w/2) + 'px';
});
DON'T USE TABLES. Terrible practice unless your using tabular data.
The best way to do this is with the following code.
<html>
<head>
<title></title>
<style media="screen">
.centered {
position: absolute;
top: 50%;
left: 50%;
margin: -50px 0 0 -50px;*/
}
</style>
</head>
<body>
<img class="centered" src="" width="100" height="100" alt="Centered Image"/>
</body>
This will work as long as it is not inside any elements without static positioning. All containing elements must be static positioning which is the default anyway.
Using CSS there is no easy way to vertically align an image center. Though to align it center horizontally you can use the following
<img src="randomimage.jpg" style="margin: 0px auto;" />
I would not reccommend a table for laying out an image as it is not really good practice anymore. Tables should only be used for tabular data.
There is some bad way to do it. Just display this image as block with absolute positioning (parent element must have "position: relative"). So you can play with margin-left and margin-top with negative values ~= a half of image sizes (respectively width and height)
If you don't mind losing IE compatibility (IE7 and older don't support this at all), you can use some CSS to simulate tables, without ever using one:
<div style="display: table; height: 500px; width: 500px;">
<img src="pic.jpg" style="display: table-cell; vertical-align:middle; margin: 0 auto; text-align: center">
</div>
Just pick appropriate height/width for the containing <div>.
If you don't mind losing the img-tag, you can use background-image to center an image in a container block.
markup:
<div class="imagebox" style="background-image: url(theimage.png);"></div>
style:
.imagebox
{
width: 500px;
height: 500px;
border: solid 1px black;
background-repeat: no-repeat;
background-position: 50% 50%;
}
Basically, you should be able to create a table in HTML, and the styling for the td tag should set the text-align attribute to center and the vertical-align attribute to middle. And, you can mess with other attributes, like borders, padding, etc...
I end up doing the below. Tested with firefox, chrome, IE8 and opera. All good.
table.NAME
{
background: green; //test color
text-align: center;
vertical-align:middle;
}
table.NAME tr td
{
width: 150px;
height: 150px;
}
html
<table class="NAME"><tr>
<td><a href="jdhfdjsfl"><img src="dfgdfgfdgf.gif" alt="dfgdfgfdgf.gif"/></a></td>
<td><a href="jdhfdjsfl"><img src="dfgdfgfdgf.gif" alt="dfgdfgfdgf.gif"/></a></td>
...
加载中,请稍侯......
精彩评论