【css】line-height实现垂直居中
最新推荐文章于 2023-06-04 19:44:16 发布
阅读量1.8k
收藏
2
点赞数
1
替换元素与非替换元素
<body>
<div>hello</div>
<span>world</span>
<img src="./imgs/路飞.jpg" alt="路飞">
</body>
div,span,img{
width:100px;
height:100px;
background-color:lightskyblue;
margin:10px;
}
块级元素可以设置width、height；
有的内联元素设置width、height后，无效，如span；
有的内联元素设置width、height后，有效，如img。img 是替换元素。
浏览器会根据 替换元素 的属性来显示内容，且通常都拥有自己的宽高或宽高比。
img是替换元素，浏览器会根据img的src属性显示图片；
input是替换元素，浏览器会根据input的type属性来显示控件；
canvas是替换元素，它的默认尺寸是300*150。
div、p、span等大部分html标签是 非替换元素，它们把要显示的内容交给浏览器，浏览器则直接显示出来。
行高
- 非替换元素中的内联元素，比如span，button，它们的可视高度是由行高决定的。
body{
margin:0;
}
.container{
width:160px;
float:left;
margin-right:10px;
}
.content{
background-color:lightgoldenrodyellow;
}
.higher{
line-height:50px;
}
<body>
<div class="container">
<span class="content">这个世界随时都要崩塌</span>
<span class="content">从前我太适应悲伤</span>
</div>
<div class="container">
<span class="content higher">这个世界随时都要崩塌</span>
<span class="content higher">从前我太适应悲伤</span>
</div>
</body>
- 由于幽灵空白节点的存在，块级元素的可视高度也受行高影响
幽灵空白节点 这个说法来自 张鑫旭大神。
<body>
<div><span></span></div>
</body>
将空span的display设置为 inline-block后，形成了一个 行框盒子，每个行框盒子前面都有一个幽灵空白节点，line-height:100px实际作用在幽灵空白节点上，因此撑高了div。
所以，由于幽灵空白节点的存在，块级元素的可视高度也受行高影响。
div{
line-height:100px;
width:100px;
border:1px solid lightskyblue;
}
<body>
<div><span style="display:inline-block"></span></div>
</body>
行距/半行距
body{
margin:0;
}
.container{
width:160px;
float:left;
margin-right:10px;
}
.content{
background-color:lightgoldenrodyellow;
line-height:50px;
}
<body>
<div class="container">
<span class="content">这个世界随时都要崩塌</span>
<span class="content">从前我太适应悲伤</span>
</div>
<div class="container">
<span class="content" style="height:50px;display:block">这个世界随时都要崩塌</span>
<span class="content" style="height:50px;display:block">从前我太适应悲伤</span>
</div>
<div class="container">
<span class="content" style="height:50px;display:block">这个世界随时都要崩塌</span>
</div>
</body>
行距 = 行高 - 字体大小。
半行距 = 行距 / 2。
借助 行距的上下等分机制，可以使用 行高 实现 单行文本的垂直居中。
单行文本垂直居中
div{
width:200px;
line-height:100px;
border:1px solid lightskyblue;
text-align:center;
}
<body>
<div>这个世界随时都要崩塌</div>
</body>
多行文本垂直居中
先看个例子。
<body>
<div class="box">
<p>这个世界随时都要崩塌 从前我太适应悲伤</p>
</div>
<div class="box">
<p>这个世界随时都要崩塌 从前我太适应悲伤</p>
</div>
<div class="box">
<p>这个世界随时都要崩塌 从前我太适应悲伤</p>
</div>
<div class="box">
<p>这个世界随时都要崩塌 从前我太适应悲伤</p>
</div>
</body>
div{
width:200px;
line-height:100px;
border:1px solid lightskyblue;
text-align:center;
}
.box{
float:left;
margin-right:10px;
}
用下面这个图来一步步理解。
“这个世界随时都要崩塌 从前我太适应悲伤”，这一行文本形成一个行框盒子。
line-height:20px作用在行框盒子前面的幽灵空白节点上， p 因此有了 (20px)*2=40px 的高度。
display:inline-block使p成为一个行框盒子，line-height:100px作用在行框盒子前的幽灵空白节点上，div因此有了 100px的高度。
如果没有p的vertical-align:middle，此时 多行文本并不是垂直居中，而是 偏上。
此时肉眼也可辨识出来，如果你更愿意相信数据的话，给你。
所以，要实现多行文本垂直居中，其css样式如下：
div{
width:200px;
line-height:100px;
border:1px solid lightskyblue;
text-align:center;
}
p{
line-height:20px;
display:inline-block;
vertical-align: middle;
text-align:left;
}
<body>
<div>
<p>这个世界随时都要崩塌 从前我太适应悲伤</p>
</div>
</body>
但即使有了vertical-align:middle，也不是绝对的垂直居中，稍稍有些偏下。
扫一扫
2791
暂无认证
到【灌水乐园】发言
Hallo_hallo: 你这说的不对吧，顶级域名就是一级域名，不是子域
星空^O^之眼: 咋就变圆角了
顾辉2003: 太棒了，爱死你了
有用有用
panda8520: 请问可以发一下源文件吗
ぬ 舟: 可以发一下image资源不