随意照片完成竖直垂直居中的3种方式(适配性还非

日期:2020-10-22 类型:科技新闻 

关键词:在线网页制作,建网页,个人简介网页制作,简单网页,建立网页

网站开发设计全过程中,将会会有期待照片竖直垂直居中的状况,并且,必须竖直垂直居中的照片的高宽比也不确定性,这就会给网页页面的合理布局带来1定的挑戰。我总结了1下,以前应用过的几种方式来使照片竖直垂直居中,除第1种方式只限于规范访问器外,此外两种方式的适配性还非常好。

方式1:
将外界器皿的显示信息方式设定成display:table,这个设定的意思无需多说了吧… img标识外界再嵌套循环1个span标识,并设定span的显示信息方式为display:table-cell,这样span內部的內容就非常于报表,能够很便捷的应用vertical-align特性来对齐在其中的內容了。
编码以下:

拷贝编码
编码以下:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>方式1 - 未知高宽比的照片竖直垂直居中</title>
<style type="text/css">
body {
height:100%;
}
#box{
width:500px;height:400px;
display:table;
text-align:center;
border:1px solid #d3d3d3;background:#fff;
}
#box span{
display:table-cell;
vertical-align:middle;
}
#box img{
border:1px solid #ccc;
}
</style>
<!--[if lte IE 7]>
<style type="text/css">?
#box{
position:relative;
overflow:hidden;
}
#box span{
position:absolute;
left:50%;top:50%;
}
#box img{
position:relative;
left:⑸0%;top:⑸0%;
}
</style>
<![endif]-->
</head>
<body>
<div id="box">
<span><img src="images/demo_zl.png" alt="" /></span>
</div>
</body>
</html>

方式2:
规范访问器的状况還是和上面1样,不一样的是对于IE6/IE7运用在img标识的前面插进1对空标识的方法。
编码以下:

拷贝编码
编码以下:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf⑻" />
<title>方式2 - 未知高宽比的照片竖直垂直居中</title>
<style type="text/css">
body{
height:100%;
}
#box{
width:500px;
height:400px;
display:table-cell;
text-align:center;
vertical-align:middle;
border:1px solid #d3d3d3;
background:#fff;
}
#box img{
border:1px solid #ccc;
}
</style>
<!--[if IE]>
<style type="text/css">
#box i {
display:inline-block;
height:100%;
vertical-align:middle
}
#box img {
vertical-align:middle
}
</style>
<![endif]-->
</head>
<body>
<div id="box">
<i></i><img src="logo.png" alt="" />
</div>
</body>
</html>

方式3:
在img标识外包裹1个p标识,规范访问器运用p标识的伪类特性:before来完成垂直居中,此外,针对IE6/IE7应用了CSS表述式来完成适配。
编码以下:

拷贝编码
编码以下:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>方式3 - 未知高宽比的照片竖直垂直居中</title>
<style type="text/css">
body {
height:100%;
}
#box{
width:500px;height:400px;
text-align:center;
border:1px solid #d3d3d3;background:#fff;
}
#box p{
width:500px;height:400px;
line-height:400px; /* 行高于高宽比 */
}
/* 适配规范访问器 */
#box p:before{
content:"."; /* 实际的值与竖直垂直居中不相干,尽量的节约标识符 */
margin-left:⑸px; font-size:10px; /* 修补垂直居中的小BUG */
visibility:hidden; /*设定成掩藏元素*/
}
#box p img{
*margin-top:expression((400 - this.height )/2); /* CSS表述式用来适配IE6/IE7 */
vertical-align:middle;
border:1px solid #ccc;
}
</style>
</head>
<body>
<div id="box">
<p><img src="images/demo_zl.png" alt="" /></p>
</div>
</body>
</html>

自己检测前两个没难题,第3个仿佛有难题