Need to center align the image in CSS
I am trying to center align (both horizontally and vertically) the image inside a div box in html and css. I am not able to center align it. Here is my below code.
<div style="float:left;margin: 10px" >
<div style="border:1px solid gray;width: 60px;height: 60px;text-align:center;">开发者_JAVA技巧;
<img style="max-height: 60px;max-width: 60px;"
src="http://t1.gstatic.com/images?q=tbn:UnPJn535Xfha7M:http://gizmodo.com/assets/resources/2007/07/ipod_6gen_1.jpg"/>
</div>
</div>
The image is getting aligned to the top. I tried using vertical-align:middle inside the img tag but it's of no use.
Came across this post and it worked for me:
div{
position: relative;
}
img {
position: absolute;
top: 0; bottom:0; left: 0; right:0;
margin: auto;
}
(Vertical and horizontal alignment)
<div> <img src="placeholder.gif" width="70" height="120" /> </div>
<div> <img src="placeholder.gif" width="90" height="80" /> </div>
<div> <img src="placeholder.gif" width="70" height="120" /> </div>
div {
float: left;
text-align: center;
width: 150px;
height: 150px;
margin: 5px;
border: 1px solid #ccc;
font-size: 1em;
line-height: 148px;
}
div img {
margin-top: expression(( 150 - this.height ) / 2);
}
html>body div img { /*hidden from IE 5-6 */
margin-top: 0; /* to clean up, just in case IE later supports valign! */
vertical-align: middle;
}
Note: some <script> tag, either inline or external (can be a dummy one), is needed to get IE 5.0 on track.
http://snipplr.com/view/24428/center-an-image-inside-a-div-vertical-and-horizontal-without-knowing-the-images-size/
Works like a charm.
try using this style in your div which contains image.
<style="display: table-cell;
vertical-align: middle;">
use text-align:center to horizontal align...no css tag in vertical align.
<div style="float:left;margin: 10px; height: 199px; width: 242px;text-align:center; vertical-align:middle;" >
<div style="border:1px solid gray;width: 60px;height: 60px;">
<img style="max-height: 60px;max-width: 60px; height: 58px; width: 47px;"
src="http://t1.gstatic.com/images?q=tbn:UnPJn535Xfha7M:http://gizmodo.com/assets/resources/2007/07/ipod_6gen_1.jpg"/>
</div>
</div>
if you want to just show the Image in center then just try this
<div style="background-position: center center; margin: 10px; text-align:center; background-image: url('http://t1.gstatic.com/images?q=tbn:UnPJn535Xfha7M:http://gizmodo.com/assets/resources/2007/07/ipod_6gen_1.jpg'); background-repeat: no-repeat;"
class="style1" >
</div>
I tried my own solution by adding display:table-cell and vertical-align:middle. Its working fine in FireFox. But miserably failing in IE :(
<div style="border:1px solid gray;width: 60px;height: 60px;display:table-cell; vertical-align:middle;text-align:center;">
<img style="max-height: 60px;max-width: 60px; " src="http://www.google.com/intl/en_ALL/images/logo.gif"/>
</div>
Some pointers needed.
You should consider using the vertical-align:middle and the text-align:center for this. That will solve the problem i guess.
Use a combination of display: inline-block, text-align: center and vertical-align: middle for centering both dimensions:
<!doctype html>
<html lang="en">
<head>
<style type="text/css">
/* Use 100% height for html and body to provide context for vertical-align */
html, body, .container, .placeholder { height: 100%; }
/*Set dimensions of image in CSS */
img { width:16px; height:16px; }
/*Vertical centering for the necessary block boxes */
.placeholder, .wrapper, .content { vertical-align: middle; }
/* Use inline-block for wrapper and placeholder */
.placeholder, .wrapper { display: inline-block; }
/* Inline necessary to use text-align:center */
.content { display:inline; }
/* Text align for horizontal centering */
.container { text-align:center; }
/* Use width of less than 100% to avoid Firefox 3+ and Webkit wrapping issues */
.wrapper { width: 99%; }
/* Media query for IE7 and under */
@media,
{
.wrapper { display:inline; }
}
</style>
<title>Vertical/Horizontal Centering Test</title>
</head>
<body>
<div class="container">
<div class="content">
<div class="wrapper">
<img src="http://mozilla.com/favicon.ico" alt="test image">
</div>
</div>
<span class="placeholder"></span>
</div>
</body>
</html>
加载中,请稍侯......
精彩评论