猿记录

一个记录、分享的博客

您的位置:主页 > 技术专栏 >

css 不定高度垂直居中,兼容ie8的写法

2018-08-22 10:38:51 作者:yxl 次阅读 技术专栏

html:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <div>
    <img src="https://drscdn.500px.org/photo/113907333/m=2048_k=1/4e889814e5c4e50607fc7e1189bba112" alt=""><span></span>
  </div>
</body>
</html>

css:

方法1:

div{
  width:500px;
  height:500px;
  margin: 100px auto;
  border: 1px solid #ccc;
  text-align: center;
}
img{
  width:200px;
  vertical-align: middle;
}
span{
  display:inline-block;
  width:0;
  height:100%;
  visibility: hidden;
  vertical-align: middle;
}

方法2:

div{
  width:500px;
  height:500px;
  text-align: center;
    white-space: normal;  //必须
    font-size: 0;  //必须
}
//这个样式必须
div:before{ 
    content: '';
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}
img{
  width:200px;
  vertical-align: middle;
}
span{
    display: inline-block;
vertical-align: middle;  //重要
}


凡本站注明“本站”或“投稿”的所有文章,版权均属于本站或投稿人,未经本站授权不得转载、摘编或利用其它方式使用上述作品。

编辑:yxl 关键词: css
0

网友评论