cssworld
cssworld copied to clipboard
Published
20 hours ago •
zhangxinxu
zhangxinxu
5.3.8vertical-align 弹窗的例子
5.3.8中的例子中 “但是 CSS 中默认是左上方排列对齐的，所以， 伪元素和这个原本在容器上边缘的 x 中心点一起往下移动了半个容器高度，也就是此时 x 中心 点就在容器的垂直中心线上”。这句话不是很理解 为什么设置了middle之后 就往下移动了半个容器的高度呢 跟左上方排列对齐有什么关系呢 希望前辈给解答下 这个是我稍微修改了一下的代码 疑惑点是伪元素设置了vertical-align: middle;之后怎么就下移了半个容器的高度
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
.container {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: rgba(0, 0, 0, 0.5);
text-align: center;
/* font-size: 0; */
white-space: nowrap;
overflow: auto;
}
.container:after {
content: 'x';
display: inline-block;
height: 100%;
vertical-align: middle;
}
.dialog {
display: inline-block;
font-size: 14px;
text-align: left;
white-space: normal;
vertical-align: middle;
}
</style>
</head>
<body>
<div class="container">
<div class="dialog">这是modalx</div>
</div>
</body>
</html>
