您的位置：首页 > Web前端 > CSS

Css3 弹性盒子垂直居中

2015-11-11 10:22 531 查看

之前在做一个项目的时候，用到弹性盒子垂直居中，鉴于宽度固定，高度不定的缘故，加上里面用的img的src是动态替换的，客户给的图片高度不一致，导致垂直居中的时候，高度较小的图片把整个img的高度固定死了，而致使大图缩小了。找了下方法解决，其实只要把水平和垂直居中都设置，便可以在切换图片的同时，又能够使图片占满宽度。

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
.flexbox{
display: -webkit-box;  /* 老版本语法: Safari,  iOS, Android browser, older WebKit browsers.  */
display: -moz-box;    /* 老版本语法: Firefox (buggy) */
display: -ms-flexbox;  /* 混合版本语法: IE 10 */
display: -webkit-flex;  /* 新版本语法： Chrome 21+ */
display: flex;       /* 新版本语法： Opera 12.1, Firefox 22+ */
/*垂直居中*/
/*老版本语法*/
-webkit-box-align: center;
-moz-box-align: center;
/*混合版本语法*/
-ms-flex-align: center;
/*新版本语法*/
-webkit-align-items: center;
align-items: center;
/*水平居中*/
/*老版本语法*/
-webkit-box-pack: center;
-moz-box-pack: center;
/*混合版本语法*/
-ms-flex-pack: center;
/*新版本语法*/
-webkit-justify-content: center;
justify-content: center;
margin: 0;
height: 700px;
width: 100% /* needed for Firefox */
}
</style>
<script src="js/jquery-1.9.1.min.js"></script>
</head>
<body>
<div class="flexbox">
<img src="images/a.png" id="img">
</div>
<button onclick="aa()">tihuan</button>
<button onclick="bb()">tihuan</button>
<script>
function aa(){
$("#<span style="font-family: Arial, Helvetica, sans-serif;">img</span><span style="font-family: Arial, Helvetica, sans-serif;">").attr("src","images/b.png");</span>
}
function bb(){
$("<span style="font-family: Arial, Helvetica, sans-serif;">#</span><span style="font-family: Arial, Helvetica, sans-serif;">img</span><span style="font-family: Arial, Helvetica, sans-serif;">").attr("src","images/a.png");</span>
}
</script>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航