Css3 弹性盒子垂直居中

最新推荐文章于 2024-06-02 17:14:20 发布

c_Yuan

最新推荐文章于 2024-06-02 17:14:20 发布

阅读量1.3w

点赞数

本文链接：https://blog.csdn.net/c_Yuan/article/details/49778357

版权

之前在做一个项目的时候，用到弹性盒子垂直居中，鉴于宽度固定，高度不定的缘故，加上里面用的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 οnclick="aa()">tihuan</button>
    <button οnclick="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>

c_Yuan

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
Css3 弹性盒子垂直居中

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

扫一扫