登录

vertical-align使图片垂直居中

对于大小未知的图片如何水平垂直居中是大家一直以来经常会遇到的问题,个人觉得水平居中比较好处理,然而垂直居中却不那么好办。很多人都知道,有一个方法就是设置其父元素的行高line-height等于高度height,然后利用vertical-align:middle;达到垂直居中的效果,那么我们来看一下这种方法是不是可行。

Markup
<!DOCTYPE html><html><head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        *{

            margin:0;

            padding:0;

        }

        div{

            margin-top: 50px;

            height: 400px;

            line-height: 400px;

            text-align: center;

            background-color: #A2A590;

        }

        div img{

            vertical-align: middle;

        }

    </style></head><body>

    <div>

        <img src="styles/images/xlf.jpg" alt="logo" id="logo" />

    </div></body></html>

这段代码中xlf.jpg是一个200*200的图片,以下为输出结果:

看上去是不是居中显示了?其实并不是,我们将div的高度设置小一点看看:

Markup
<!DOCTYPE html><html><head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        *{

            margin:0;

            padding:0;

        }

        div{

            margin-top: 50px;

            height: 210px;

            line-height: 210px;

            text-align: center;

            background-color: #A2A590;

        }

        div img{

            vertical-align: middle;

        }

    </style></head><body>

    <div>

        <img src="styles/images/xlf.jpg" alt="logo" id="logo" />

    </div></body></html>

是不是可以看出来图片明显没有居中?

那么这是为什么呢?
在css权威指南中是这么说的:
vertical-align:middle这个值通常适合于图像,因为它使元素的纵向的中点对齐本行的“中间”。行的中间定义为基线以上半个ex处的那个点,而ex的值源于父元素的字体尺寸。在实际应用中,因为大多数用户代理将1ex等同于0.5em,middle将会是元素的纵向重点与父元素基线以上四分之一em处的一个点对齐。
要理解这里首先要清楚基线和ex的概念。基线并不是汉字文字的下端沿,而是英文字母“x”的下端沿。而ex则指的是小写字母“x”的高度。那么结合下图来看:

不难看出ex与字体大小相关,而且基线上0.5ex处并不是中线的所在,因而会产生之前的偏差。我们可以通过增大字体来验证这个猜想是否正确:

Markup
<!DOCTYPE html><html><head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        *{

            margin:0;

            padding:0;

        }

        div{

            margin-top: 50px;

            height: 210px;

            line-height: 210px;

            font-size: 80px;

            text-align: center;

            background-color: #A2A590;

        }

        div img{

            vertical-align: middle;

        }

    </style></head><body>

    <div>

        <img src="styles/images/xlf.jpg" alt="logo" id="logo" />

    </div></body></html>

发生了明显的偏差。

所以解决这个小bug的方法就是设置字体大小为0。如下:

Markup
<!DOCTYPE html><html><head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        *{

            margin:0;

            padding:0;

        }

        div{

            margin-top: 50px;

            height: 210px;

            line-height: 210px;

            font-size: 0;

            text-align: center;

            background-color: #A2A590;

        }

        div img{

            vertical-align: middle;

        }

    </style></head><body>

    <div>

        <img src="styles/images/xlf.jpg" alt="logo" id="logo" />

    </div></body></html>

结果如图:

选择赏赐方式:

×

多少都是心意,感谢大家

选择分享方式:

×

扫一扫分享到微信朋友圈

标签: CSS

本文标题:vertical-align使图片垂直居中

本文地址:https://www.zbpnice.cn/post/64.html

温馨提示:文章内容系作者个人观点,不代表柏平博客对观点赞同或支持。

版权声明: 本文为原创文章,创建于2年前 (2017-07-01),版权归 柏平 所有,欢迎分享本文,转载请保留出处!

还没有留言,还不快点抢沙发?

发表评论: