不使用表格实现跨浏览器垂直水平居中图片

Html Css

 这段代码可以在一个已知宽高的容器内垂直水平居中一个未知大小的图片,这是 IE 的一个hack:

 

<figure class='logo'>

    <span></span>

    <img class='photo'/>

</figure>

.logo {

  display: block;

  text-align: center;

  display: block;

  text-align: center;

  vertical-align: middle;

  border: 4px solid #dddddd;

  padding: 4px;

  height: 74px;

  width: 74px; }

  .logo * {

    display: inline-block;

    height: 100%;

    vertical-align: middle; }

    .logo .photo {

    height: auto;

    width: auto;

    max-width: 100%;

    max-height: 100%; }

相关内容推荐

JQ特效之:页面向上滚动时弹出模块

页面向上滚动弹出模块这个特效比较适合资源类网站,用户来到你的网站后一般动作就算向下翻页找,找着找着发现没找到,一般会回到顶部去找导航栏之类的,这个时候就会产生一个

返回
顶部