CSS實現圖片垂直置中

標籤：style   blog   color   使用   width   html   

.box{        width: 100px;        height: 100px;        border: 1px solid #ccc;        border-radius: 5px;        margin-bottom: 15px;    }    .out,    .in{        float: left;        margin-right: 15px;    }    /* out */    .out .t{        box-shadow: 0 -3px 5px -2px #f00;    }    .out .r{        box-shadow: 3px 0 5px -2px #0f0;    }    .out .b{        box-shadow: 0 3px 5px -2px #00f;    }    .out .l{        box-shadow: -3px 0 5px -2px #ff0;    }    /* in */    .in .t{        box-shadow: inset 0 3px 5px -2px #f00;    }    .in .r{        box-shadow: inset -3px 0 5px -2px #0f0;    }    .in .b{        box-shadow: inset 0 -3px 5px -2px #00f;    }    .in .l{        box-shadow: inset 3px 0 5px -2px #ff0;    }

 

1.使用一個空標籤輔助實現圖片垂直置中

css代碼：

<style type="text/css">
*{ margin:0; padding:0;}
body{padding:10px 0 0 10px;}
.box{
width:200px;
height:200px;
border:1px solid #0CF;
text-align:center;
}
.box span{
height:100%;
vertical-align:middle;
display:inline-block;
}
.box img{
vertical-align:middle;
}
</style>

html代碼：

<div class="box">
<span></span>
<img src="1.jpg" />
</div>

2.利用包圍圖片的盒子及圖片的寬度，高度計算實現圖片的垂直置中