zoukankan      html  css  js  c++  java
  • 图片垂直居中的意外收获(都是空白惹的祸) 简单

    最近在学习一个图片的垂直居中,最后,结果是,图片确实是垂直居中了,不过水平却不居中了。

    先看看代码:

    <div class="center">
    <div>
    <a>
    <i></i>
    <img src="img/center/1.jpg" alt=""/>

    </a>
    </div>
    </div>

    //css
    div.center{height:220px; 210px; margin:20px auto;}
    div.center div{display:table; 204px; height:184px;}
    div.center a{overflow:hidden; text-align:center; display:table-cell; border:solid 2px #00f; vertical-align:middle; 200px; height:180px;}
    div.center a{display\0:block\9; *display:block;}
    div.center a:hover{border:solid 2px #ff0;}
    div.center i{vertical-align:middle; height:100%; display:inline-block;}
    div.center img{vertical-align:middle;}

    --------------------------
    经过许久的排查,才发现在ff,chrome,和opera等浏览器下,水平居中有问题。原来是<i></i>标签后面的空格犯的错

    解决方案: 删除后边的空白,不让i 和 img标签换行。
  • 相关阅读:
    linux 中的vim的配置文件的位置
    centos find
    multi-cursor
    ctrlsf插件
    Vim的可视模式
    Vim的tagbar插件
    Vim的tag系统
    ~/.ctag的作用与配置
    在Vim里使用gtags-cscope
    查看Vim的option变量的值
  • 原文地址:https://www.cnblogs.com/chyong168/p/2256050.html
Copyright © 2011-2022 走看看