CSS实现图片垂直居中

浏览数：26 / 时间：2015年06月09日 
.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.利用包围图片的盒子及图片的宽度，高度计算实现图片的垂直居中

CSS实现图片垂直居中,古老的榕树,5-wow.com

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

标签： class 代码 style html src sp class 代码 style html src sp

相关文章

随机文章

您可能还喜欢

您可能还喜欢