CSS实例教程:网页页面照片竖直垂直居中的应用

日期:2021-01-20 类型:科技新闻 

关键词:怎么把小程序变成二维码,微信小程序怎么开通,微信小程序csdn,小程序开发,网络答题小程序


在以前的 淘宝UED 招骋 中有这样1道题型:
“应用纯CSS完成未知规格的照片(但高宽都小于200px)在200px的正方描述器中水平静竖直垂直居中。”
自然出卷其实不是随便,而是有其实际的缘故,竖直垂直居中是 淘宝 工作中中最常遇到的1个难题,很有意味着性。
题型的难点在于两点
    竖直垂直居中; 照片是个换置元素,一些独特的特点。

至于怎样处理,下面是1个衡量的相对性构造整洁,CSS简易的处理方式:
.box {
/*非IE的流行访问器鉴别的竖直垂直居中的方式*/
display: table-cell;
vertical-align:middle;
/*设定水平垂直居中*/
text-align:center;
/* 对于IE的Hack */
*display: block;
*font-size: 175px;/*约为高宽比的0.873,200*0.873 约为175*/
*font-family:Arial;/*避免非utf⑻引发的hack无效难题,如gbk编号*/
width:200px;
height:200px;
border: 1px solid #eee;
}
.box img {
/*设定照片竖直垂直居中*/
vertical-align:middle;
}
<div class="box">
<img src="http://pics.taobao.com/bao/album/promotion/
taoscars_180x95_071112_sr.jpg" />
</div>
自然也有别的的处理方式,在此不深究,有兴趣爱好的能够阅读文章下:
《Vertical centering using CSS》
《Vertical centering using CSS》(题目和上同,內容不一样)
《CSS List Grid Layout》
上一篇:CSS实例教程:最基础的条状图表 返回下一篇:没有了