zoukankan      html  css  js  c++  java
  • 图片上下垂直居中各方法

    方法一:

    display:box;box-pack:center;box-align:center;

    display:-webkit-box;-webkit-box-pack:center;-webkit-box-align:center;

    display:-moz-box;-moz-box-pack:center;-moz-box-align:center;

    方法二:

    父级 display:flex;justify-content:center;align-items;   有的手机系统不支持

    方法三:

    父级 display:flex;子级:align-self:center;margin:0 auto;

    方法四:

    添加辅助元素

    <p style="200px"><img src="asdf.png"><span>123</span><i></i></p>

    img{vertical-align:middle;display:inline-block;}

    i{display:inline-block;height:100%;vertical-align:middle;}

    span{display:inline-block;vertical-align:middle;}

    方法五:

    父元素Div position:relation

    子元素Div position:absolute;left:50%;top:50%;margin-left:-width*50%;margin-top:-width*50%;

    方法六:

    父元素 display:table-cell;vertical-align:middle; height:2rem;text-align:center; 父元素高度固定

    子元素图片 vertical-align:middle;

    兼容写法(手机不支持flex,识别box)

    首先是定义容器的 display 属性:

    .box{
    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+ */
    }
  • 相关阅读:
    django操作mysql
    Pycharm 社区版本Database Navigator 安装教程
    自定义报告,用Java写一个html文件
    java中javamail收发邮件实现方法
    Java中的File操作总结
    JavaWeb学习总结(五十二)——使用JavaMail创建邮件和发送邮件
    画面分割和偏移计算
    MapView源代码
    MapUnit单元格源代码
    RecyclerView
  • 原文地址:https://www.cnblogs.com/myRain/p/6047579.html
Copyright © 2011-2022 走看看