. 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; }/*inch*/. 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. Use an empty label to assist in vertically centering the picture
CSS code:
<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 code:
<div class= "box" >
<span></span>
</div>
2. Use the width of the box and picture that surrounds the picture to achieve a vertical center of the image.