刚学代码知道的比较少,求会得给我解决一下

为什么出来的文字不是非常的垂直居中,比较靠下!
感觉自己写的没有什么问题啊。
为什么出来的文字不是非常的垂直居中,比较靠下!
感觉自己写的没有什么问题啊。

img

img

原因就是你的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;

img


<!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>
spanline-height也要社,
div前面加上个
* {
margin: 0;
padidng:0;
}

把height和line-height都写在div里试试

a标签,span属于行内元素,你设置的行高可能没起作用,你设置一下display:block试试