vertical-align使图片垂直居中的小细节_CSS学习

资料来源：网络整理时间：2023/3/4 1:04:01 共计：3599 浏览

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

<!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的高度设置小一点看看：

<!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处并不是中线的所在，因而会产生之前的偏差。我们可以通过增大字体来验证这个猜想是否正确：

<!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。如下：

<!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>

结果如图：

版权说明：
本网站凡注明“广州京杭原创”的皆为本站原创文章，如需转载请注明出处！
本网转载皆注明出处，遵循行业规范，如发现作品内容版权或其它问题的，请与我们联系处理！
欢迎扫描右侧微信二维码与我们联系。

·上一条：JS对联广告 - 可点击关闭的两侧对联广告代码_js/jQuery | ·下一条：margin设置为什么会失效？无效情形解析！_CSS学习