建站代码网

热门标签

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

 这段代码可以在一个已知宽高的容器内垂直水平居中一个未知大小的图片,这是 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%; }

热门信息

X