为什么出来的文字不是非常的垂直居中,比较靠下!
感觉自己写的没有什么问题啊。
为什么出来的文字不是非常的垂直居中,比较靠下!
感觉自己写的没有什么问题啊。
原因就是你的a标签行高20px,但是里面的字并未达实际上即使给a指定了 line-height: 12px ,也无法居中,会发现实际高度为15.85px,改的再小也都是这个数,直到把 div 的行高改为15.85px,a再指定 line-height: 15.85px 后,实现了居中。这和文字大小有关系,实际上文字大小最小只能12px,即使设置更小的文字都是12px的大小。当父盒子设置行高小于 15.85px 时,由于a会靠顶对齐,所以是没法实现居中的。这个时候,我们可以通过 对 vertical-align:top 的设置来实现居中,注意仍然需要设置 line-height 。
a标签和span标签加上vertical-align:top;就可以了
a {
font-size: 12px;
color: #b0b0b0;
text-decoration: none;
line-height:20px;
vertical-align:top;
}
a:hover {
color: white;
}
span {
font-size: 12px;
line-height:20px;
vertical-align:top;
}
要文字居中的话,div上添加text-align:center;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
display: flex;
justify-content: center;
align-items: center;
height: 20px;
background-color: rgb(51,51,51);
font-size: 12px;
}
a {
color: #b0b0b0;
text-decoration: none;
}
a:hover{
color: white;
}
span {
padding: 0 5px;
color: #b0b0b0;
}
</style>
</head>
<body>
<div>
<a href="#">小米网</a>
<span>|</span>
<a href="#">MUI</a>
<span>|</span>
<a href="#">米聊</a>
<span>|</span>
<a href="#">游戏</a>
<span>|</span>
<a href="#">多看阅读</a>
<span>|</span>
<a href="#">云服务</a>
<span>|</span>
<a href="#">小米网移动版</a>
<span>|</span>
<a href="#">问题反馈</a>
<span>|</span>
<a href="#">SelectRegior</a>
</div>
</body>
</html>
span的line-height也要社,
div前面加上个
* {
margin: 0;
padidng:0;
}
把height和line-height都写在div里试试
a标签,span属于行内元素,你设置的行高可能没起作用,你设置一下display:block试试