zoukankan      html  css  js  c++  java
  • 一个未知宽高的元素在div中垂直水平居中

    <body>
        <div id="#div1">
            <img src="img1.png"></img>
        </div>
    </body>

    那么,如何让img元素在div中居中对齐呢?

    第一种方法

    第一步:在img标签后面添加一个元素,比如说添加一个span元素

    <body>
        <div id="div1">
            <img src="img1.png"></img><span></span>
        </div>
    </body>

    第二步:为这几个元素设置样式

    #div1 {
        text-align:center;
    }
    
    #div1 span {
        display:inline-block;
        vertical-align: middle;
    }
    
    #div1 img {
        vertical-align:middle;
    }

    好啦,完成以上操作,这个Img元素在div中就是垂直居中的了,这种方法的兼容性很好的,唯一的缺点就是需要在元素后面添加一个元素啦。注意,这个添加的元素最好是span元素,如果是div的话,在低版本ie下的话有问题。因为不支持div转换为行内块元素。

    第二种方法

    这种方法就是利用css3的新特性了。

    #div1 {
        display:flex;
        vertical-align:middle;
        align-items:middle
    }

    这种方法的缺点就是,如果浏览器不支持css3,那就没用了。

  • 相关阅读:
    c++ 与 c 的区别
    c++ 查看程序运行时间
    串口阻塞与非阻塞
    串口缓冲区
    马拉车算法
    printf 自加自减
    stack
    长度问题
    PCIE的内存地址空间、I/O地址空间和配置地址空间
    数组和指针
  • 原文地址:https://www.cnblogs.com/10manongit/p/13034730.html
Copyright © 2011-2022 走看看