关于 vertical-align:middle 的误解

关于 vertical-align:middle 的误解_第1张图片

今天,我就借这张图总结一下居中问题。

从图中来看,这里涉及到三处居中。

第一处居中 是白色背景块相对于 body 水平垂直居中。
第二处居中 文字相对于白色背景块垂直居中
第三处居中 图片相对于白色背景块垂直居中

先来看看如何实现,下面是我的 html 代码:

<body>
    <div class="container">
        <img src="logo.png" alt="logo">
        <span>翼灵物联工作室p>
    div>
body>

CSS代码:

body {
    background-color: lightblue;
}
.container {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 768px;
    height: 200px;
    background-color: #fff;
    text-align: center;
    line-height: 200px;
}
img {
    vertical-align: middle;
}

这三处居中的代码分别如下:

第一处居中:

.container {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

第二处居中:

.container {
    height: 200px;
    line-height: 200px;
    text-align: center;
}

第三处居中:

img {
    vertical-align: middle;
}

这是我的一种实现方式。

我对这种方式的误解主要就是 vertical-align: middle; 语句。

vertical-align 属性

先看看两个误解:

误解1:认为 vertical-align: middle; 是作用于父元素。

误解2:认为 vertical-align: middle; 是相对于父元素。

然后,来看看 vertical-align 的定义:

vertical-align 属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐方式。

也就是说,vertical-align 是作用于自身的,并且是相对于所在行。

也就是说对图片设置 vertical-align:middle 仅仅只能实现图片相对于这一行的文字中线对齐。

你可能感兴趣的:(css)