315,508
社区成员
发帖
与我相关
我的任务
分享CSS文字垂直居中-有误差
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>title</title>
</head>
<body>
<div>
<span style="width:400px;
height:100px;
border:1px solid red;
text-align:center;
line-height:100px;
font-size:95px;
display:block">
居中
</span>
<span
style="width:400px;
height:50px;
border:1px solid red;
text-align:center;
line-height:50px;
font-size:20px;
display:block">
间隔
</span>
<span
style="width:400px;
height:100px;
border:1px solid red;
text-align:center;
line-height:100px;
font-size:128px;
display:block">
AA
</span>
<span
style="width:400px;
height:50px;
border:1px solid red;
text-align:center;
line-height:50px;
font-size:20px;
display:block">
间隔
</span>
<span
style="width:400px;
height:100px;
border:1px solid red;
text-align:center;
line-height:100px;
font-size:128px;
display:block">
11
</span>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>title</title>
</head>
<body>
<div>
<span
style="width:400px;
height:100px;
border:1px solid red;
font-size:95px;
align-items: center;
justify-content: center;
display:flex">
居中
</span>
<span
style="width:400px;
height:50px;
border:1px solid red;
font-size:20px;
align-items: center;
justify-content: center;
display:flex">
间隔
</span>
<span
style="width:400px;
height:100px;
border:1px solid red;
font-size:128px;
align-items: center;
justify-content: center;
display:flex">
AA
</span>
<span
style="width:400px;
height:50px;
border:1px solid red;
font-size:20px;
align-items: center;
justify-content: center;
display:flex">
间隔
</span>
<span
style="width:400px;
height:100px;
border:1px solid red;
font-size:128px;
align-items: center;
justify-content: center;
display:flex">
11
</span>
</div>
</body>
</html>
可以看到用css的两种方式进行文字垂直居中时有一定误差，中文、英文、数字的垂直居中的误差都不一样，请教下原因。
text-align:center;
line-height:100px;
display:block"
align-items: center;
justify-content: center;
display:flex"
...全文
请发表友善的回复…
发表回复
探乎站长论坛欢迎你 2023-11-08
- 打赏
- 举报
字体原因吧
