css图片垂直水平居中
一、利用line-height和height来垂直水平居中
Html代码:
<div class="box">
<img src="aa.png">
</div>
Css代码:
.box{
width: 300px;
height: 300px;
background: blue;
text-align: center;
line-height: 300px;
}
.box img{
vertical-align: middle;
}
二、利用table-cell来垂直水平居中(用这个属性来模拟table,存在兼容性,这种方法并不兼容IE6/IE7)
Html代码:
<div class="box">
<img src="aa.png">
</div>
css代码:
.box{
width: 300px;
height: 300px;
background: blue;
display: table-cell;
vertical-align: middle;
text-align: center;
}
三、利用span来进行水平垂直居中(找span做一个参照物)
Html代码:
<div class="box">
<img src="aa.png"><span></span>
</div>
css代码:
.box{
width: 300px;
height: 300px;
background: blue;
text-align: center;
}
.box span{
display: inline-block;
vertical-align: middle;
width: 0;
height: 100%;
}
四、利用绝对定位来设置(用margin减去图片宽高值的一半)
Html代码:
<div class="box">
<img src="aa.png">
</div>
Css代码:
.box{
position: relative;
width: 300px;
height: 300px;
background: blue;
}
.box img{
position: absolute;
top: 50%;
left: 50%;
width: 26px;
height: 26px;
margin-left: -13px;
margin-top: -13px;
}
清除浮动的方式
一、浮动产生的主要原因:当标签里面的元素没有实际高度时会产生高度塌陷(父元素不写高度时,子元素写了浮动后,父元素会发生高度塌陷)这个时候,为了解决高度塌陷就要清除浮动
二、清除浮动的三种方式
1、给父元素添加声明 :
overflow:hidden;
2、在浮动元素下方添加空div,并给该元素添加声明:
clear:both;
height:0;
overflow:hidden;
3、万能清除浮动法( after伪类)
选择符:after{
content:".";
clear:both;
display:block;
height:0;
visibility:hidden;
}
为了兼容 IE6,7 我们要使用zoom来配合
选择符:after{
content:".";
clear:both;
display:block;
height:0;
visibility:hidden;
}
选择符{zoom:1}