Question

在上图中，图标和文本没有对齐。左侧的链接位于底部，图标看起来居中，右侧的链接也处于居中，除了 profile 标识符位于底部。

我尝试使用

修复此问题

align-items:center;

但不能解决问题。

html代码：

<!DOCTYPE html>
<head>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="style.css">
</head>
<body>
        <div class="wrapper">
            <nav>
                <ul>
                    <li><a href="#">Home</a></li>
                    <li><a href="#">About</a></li>
                    <li><a href="#">Store</a></li>
                    <li><a href="#">Contact</a></li>
                </ul>

                <ul class="right-icons">
                    <a href="#"><i class="material-icons">face</i>profile</a>
                    <a href="#"><i class="material-icons">notification_important</i></a>
                    <a href="#">Sign in</a>
                    <a href="#">Log in</a>
                </ul>
            </nav>
        </div>
</body>

css代码：

*{
    margin:0;
    padding:0;
}

body{
    background-color:white;
}

.wrapper{
    width:100%;
    max-width:960px;
    margin:0 auto;
}

nav{
    background-color: #333;
}

nav ul{
    list-style-type:none;
    padding:0;
}

nav a{
    text-decoration:none;
    display: block;
    color:white;
    padding: 10px;
}

nav a:hover{
    background-color:#555;
}

@media screen and (min-width: 500px){
    nav{
        display: flex;
        justify-content:space-between;
        align-items: center;
    }
    nav ul{
        display:flex;
        align-items: center;

    }

}

Answer 1

您需要为包含 i 标签的父div提供一个CSS属性。

您可以通过提供 a 包装它的标签

轻松解决此问题

display: flex; align-items: center;

所以看起来像这样

nav a{
text-decoration:none;
display: flex;
align-items: center;
color:white;
padding: 10px;
}

为什么文本链接和图标链接没有垂直居中？

1 个答案: