阿西河

所有教程

公众号
🌙
阿西河前端的公众号

我的收藏

    最近访问  (文章)

      教程列表

      抓包专区
      测试专区

      写一段CSS让图片(未知大小)水平垂直居中

      写一段CSS让图片(未知大小)水平垂直居中;

      <div class="img_wrap"><img src="..."></div>
      

      方法一

      该方法是将外部容器的显示模式设置成display:table

      img标签外部再嵌套一个span标签,并设置span的显示模式为display:table-cell

      这样就可以很方便的使用vertical-align象表格元素那样对齐了,当然这只是在标准浏览器下,IE6/IE7还得使用定位。

      <div id="box">
      <span><img src="images/demo.jpg" alt="" /></span>
      </div>
      <style type="text/css">
      #box{
          width:500px;height:400px;
          display:table;
          text-align:center;
          border:1px solid #d3d3d3;background:#fff;
      }
      #box span{
          display:table-cell;
          vertical-align:middle;
      }
      #box img{
          border:1px solid #ccc;
      }
      </style>
      <!--[if lte IE 7]>
      <style type="text/css">
      #box{
          position:relative;
          overflow:hidden;
      }
      #box span{
          position:absolute;
          left:50%;top:50%;
      }
      #box img{
          position:relative;
          left:-50%;top:-50%;
      }
      </style>
      <![endif]-->
      

      方法二

      在img标签外包裹一个p标签,标准浏览器利用p标签的伪类属性:before来实现,IE6/IE7使用了CSS表达式来实现兼容。

      <div id="box"><p><img src="images/demo.jpg" alt=""/></p></div>
      
      #box{
          width:500px;height:400px;
          text-align:center;
          border:1px solid #d3d3d3;background:#fff;
      }
      #box p{
          width:500px;height:400px;
          line-height:400px/* 行高等于高度 */
      }
        
      /* 兼容标准浏览器 */
      #box p:before{
          content:"."/* 具体的值与垂直居中无关,尽可能的节省字符 */
          margin-left:-5pxfont-size:10px/* 修复居中的小BUG */
          visibility:hidden/*设置成隐藏元素*/
      }
      #box p img{
          *margin-top:expression((400 - this.height )/2); /* CSS表达式用来兼容IE6/IE7 */
          vertical-align:middle;
          border:1px solid #ccc;
      }
      

      更多面试题

      如果你想了解更多的前端面试题,可以查看本站的WEB前端面试题 ,这里基本包涵了市场上的所有前端方面的面试题,也有一些大公司的面试图,可以让你面试更加顺利。

      面试题
      HTMLCSSJavaScript
      jQueryVue.jsReact
      算法HTTPBabel
      BootStrapElectronGulp
      Node.js前端经验相关前端综合
      Webpack微信小程序-

      这些题库还在更新中,如果你有不错的面试题库欢迎分享给我,我整理后放上来;人人为我,我为人人,互帮互助,共同提高,祝大家都拿到心仪的Offer!

      目录
      目录