您的位置：首页 > Web前端 > CSS

关于 vertical-align:middle 的误解

2017-09-13 19:03 225 查看


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

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

第一处居中 是白色背景块相对于 
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
相关文章推荐
新的分享
章节导航