How to center an image?
2046 ワード
I find three ways to center an image in a div:
In my opinion, the third method is graceful and accurate, which i borrow from my last example .
<style type="text/css">
.container1
{
border: solid 1px #666;
width: 100px;
height: 100px;
}
.container1 img
{
margin: 42px 0px 0px 42px; /* (100-16)/2 = 42 */
}
.container3
{
border: solid 1px #666;
width: 100px;
height: 100px;
position: relative;
}
.container3 img
{
position: absolute;
top: 42px;
left: 42px; /* (100-16)/2 = 42 */
}
.container4
{
border: solid 1px #666;
width: 100px;
height: 100px;
position: relative;
}
.container4 img
{
position: absolute;
top: 50%;
margin-top: -8px; /* 16/2 = 8 */
left: 50%;
margin-left: -8px;
}
</style>
<div class="container1">
<img src="mini/clock.gif" mce_src="mini/clock.gif" alt="" />
</div>
<br />
<div class="container3">
<img src="mini/clock.gif" mce_src="mini/clock.gif" alt="" />
</div>
<br />
<div class="container4">
<img src="mini/clock.gif" mce_src="mini/clock.gif" alt="" />
</div>
In my opinion, the third method is graceful and accurate, which i borrow from my last example .