zoukankan      html  css  js  c++  java
  • 垂直居中的图片的高度也不确定

    在网页设计过程中,有时候会希望图片垂直居中的情况。而且,需要垂直居中的图片的高度也不确定,这就会给页面的布局带来一定的挑战。下面总结了一下,曾经使用过的几种方法来使图片垂直居中,除了第一种方法只限于标准浏览器外,另外两种方法的兼容性还不错。


    方法一

    将外部容器的显示模式设置成display:table,这个设置的意思不用多说了吧… img标签外部再嵌套一个span标签,并设置span的显示模式为display:table-cell,这样span内部的内容就相当于表格,可以很方便的使用vertical-align属性来对齐其中的内容了。
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>方法1 - 未知高度的图片垂直居中 - www.nowamagic.net</title>
    <style type="text/css">
        body {height:100%;}
        #box{
            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]-->
        </head>
        <body>
        <div id="box">
        <span><img src="images/demo_zl.png" alt="" /></span>
            </div>
        </body>
    </html>


    方法二


    标准浏览器的情况还是和上面一样,不同的是针对IE6/IE7利用在img标签的前面插入一对空标签的办法。
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
        <title>方法2 - 未知高度的图片垂直居中 - www.nowamagic.net</title>
    <style type="text/css">
        body {height:100%;}
        #box{
            500px;height:400px;
            display:table-cell;
            text-align:center;
            vertical-align:middle;
            border:1px solid #d3d3d3;background:#fff;
        }
        #box img{border:1px solid #ccc;}
    </style>
    <!--[if IE]>
        <style type="text/css">
        #box i {display:inline-block;height:100%;vertical-align:middle}
        #box img {vertical-align:middle}
        </style>
    <![endif]-->
    </head>
    <body>
        <div id="box">
            <i></i><img src="images/demo_zl.png" alt="" />
        </div>
    </body>
    </html>


    方法三


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

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>方法3 - 未知高度的图片垂直居中 - www.nowamagic.net</title>
    <style type="text/css">
    body {height:100%;}
    #box{500px;height:400px;text-align:center;border:1px solid #d3d3d3;background:#fff;}
    #box p{500px;height:400px;line-height:400px;  /* 行高等于高度 */}
    /* 兼容标准浏览器 */
    #box p:before{
        content:".";  /* 具体的值与垂直居中无关,尽可能的节省字符 */
        margin-left:-5px; font-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;
    }
    </style>
    </head>
        <body>
            <div id="box">
            <p><img src="images/demo_zl.png" alt="" /></p>
            </div>
        </body>
    </html>

  • 相关阅读:
    electron-vue脚手架项目初始化时提示: Failed to download repo simulatedgreg/electron-vue: Response code Server Error)
    SqlServer在附加数据库时提示:无法打开物理文件**.mdf 操作系统错误拒绝访问
    ASP.NET的项目怎样在WindowsServer上部署
    Express中错误处理中间件的使用
    Express中间件的应用-路由保护(登录限制)、网站维护、页面404
    ASP.NET中序列化与反序列化-以显示上一次登录的信息为例
    ASP.NET中使用Cache类来缓存页面的信息
    ASP.NET中使用一般处理程序ashx作为后台处理实现响应get和post请求
    ASP.NET中实现复用代码自定义用户控件UserControl的使用
    js加载更多
  • 原文地址:https://www.cnblogs.com/youzhuxiaoyao/p/5659618.html
Copyright © 2011-2022 走看看