<li> 当一个内容嵌入锚点内时，如何垂直对齐两个内容

我试图水平呈现一个HTML无序列表，其中每个项目都具有相同的长度和高度。这两项都嵌入了一个链接。其中一个嵌入了图像。我想让项目垂直对齐。

我使用flex显示器，但无法垂直对齐li内容。

在以下示例中，Some text和图像(此处为Logo(，即两个带橙色边框的框，应垂直对齐，但事实并非如此。

我不想更改HTML代码(不想更改给定的语义，也不想添加不提供任何新HTML信息的元素(，只想更改CSS。

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset='utf-8' />
<style type='text/css'>
* {
margin: 0;
padding: 0;
border: 0;
box-sizing: border-box;
}
#navbar {
background:silver;
}
#navbar ul {
display: flex;
flex-wrap: wrap;
list-style: none;
}
#navbar ul > li {
flex: 1;
border: 5px dotted green;
}

#navbar a {
border: 5px dotted orange;
}
#navbar img {
height: 80px;
vertical-align:middle;
}   
</style>
<title></title>
</head>
<body>
<body>
<nav id="navbar">
<ul>
<li><a href="#">Some text</a></li>
<li><a id="logo" href="#"><img src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjxzdmcKICAgeG1sbnM6ZGM9Imh0dHA6Ly9wdXJsLm9yZy9kYy9lbGVtZW50cy8xLjEvIgogICB4bWxuczpjYz0iaHR0cDovL2NyZWF0aXZlY29tbW9ucy5vcmcvbnMjIgogICB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiCiAgIHhtbG5zOnN2Zz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciCiAgIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKICAgeG1sbnM6c29kaXBvZGk9Imh0dHA6Ly9zb2RpcG9kaS5zb3VyY2Vmb3JnZS5uZXQvRFREL3NvZGlwb2RpLTAuZHRkIgogICB4bWxuczppbmtzY2FwZT0iaHR0cDovL3d3dy5pbmtzY2FwZS5vcmcvbmFtZXNwYWNlcy9pbmtzY2FwZSIKICAgaWQ9IkNhbHF1ZV8xIgogICBkYXRhLW5hbWU9IkNhbHF1ZSAxIgogICB2aWV3Qm94PSIwIDAgNzYxLjEyIDMyMi4yMyIKICAgdmVyc2lvbj0iMS4xIgogICBzb2RpcG9kaTpkb2NuYW1lPSJsb2dvLnN2ZyIKICAgaW5rc2NhcGU6dmVyc2lvbj0iMS4wLjIgKGU4NmM4NzA4NzksIDIwMjEtMDEtMTUpIj4KICA8bWV0YWRhdGEKICAgICBpZD0ibWV0YWRhdGE1NSI+CiAgICA8cmRmOlJERj4KICAgICAgPGNjOldvcmsKICAgICAgICAgcmRmOmFib3V0PSIiPgogICAgICAgIDxkYzpmb3JtYXQ+aW1hZ2Uvc3ZnK3htbDwvZGM6Zm9ybWF0PgogICAgICAgIDxkYzp0eXBlCiAgICAgICAgICAgcmRmOnJlc291cmNlPSJodHRwOi8vcHVybC5vcmcvZGMvZGNtaXR5cGUvU3RpbGxJbWFnZSIgLz4KICAgICAgICA8ZGM6dGl0bGU+PC9kYzp0aXRsZT4KICAgICAgPC9jYzpXb3JrPgogICAgPC9yZGY6UkRGPgogIDwvbWV0YWRhdGE+CiAgPGRlZnMKICAgICBpZD0iZGVmczUzIj4KICAgIDxyZWN0CiAgICAgICB4PSIxNy44MDgwNTMiCiAgICAgICB5PSIzNi43NzM1NjIiCiAgICAgICB3aWR0aD0iNzExLjkxNzYxIgogICAgICAgaGVpZ2h0PSIyNDcuNTQzMjMiCiAgICAgICBpZD0icmVjdDk1NyIgLz4KICA8L2RlZnM+CiAgPHNvZGlwb2RpOm5hbWVkdmlldwogICAgIHBhZ2Vjb2xvcj0iI2ZmZmZmZiIKICAgICBib3JkZXJjb2xvcj0iIzY2NjY2NiIKICAgICBib3JkZXJvcGFjaXR5PSIxIgogICAgIG9iamVjdHRvbGVyYW5jZT0iMTAiCiAgICAgZ3JpZHRvbGVyYW5jZT0iMTAiCiAgICAgZ3VpZGV0b2xlcmFuY2U9IjEwIgogICAgIGlua3NjYXBlOnBhZ2VvcGFjaXR5PSIwIgogICAgIGlua3NjYXBlOnBhZ2VzaGFkb3c9IjIiCiAgICAgaW5rc2NhcGU6d2luZG93LXdpZHRoPSIxOTIwIgogICAgIGlua3NjYXBlOndpbmRvdy1oZWlnaHQ9IjEwMTYiCiAgICAgaWQ9Im5hbWVkdmlldzUxIgogICAgIHNob3dncmlkPSJmYWxzZSIKICAgICBpbmtzY2FwZTp6b29tPSIyLjA0Njk4MzQiCiAgICAgaW5rc2NhcGU6Y3g9IjM4Ni4wNjUyMiIKICAgICBpbmtzY2FwZTpjeT0iMTYxLjExNTAxIgogICAgIGlua3NjYXBlOndpbmRvdy14PSIwIgogICAgIGlua3NjYXBlOndpbmRvdy15PSIyNyIKICAgICBpbmtzY2FwZTp3aW5kb3ctbWF4aW1pemVkPSIxIgogICAgIGlua3NjYXBlOmN1cnJlbnQtbGF5ZXI9IkNhbHF1ZV8xIgogICAgIGlua3NjYXBlOnNuYXAtdGV4dC1iYXNlbGluZT0idHJ1ZSIgLz4KICA8cmVjdAogICAgIHN0eWxlPSJmaWxsOm5vbmU7c3Ryb2tlLXdpZHRoOjMuNzg7c3Ryb2tlLWRhc2hvZmZzZXQ6MC4zNzg7c3Ryb2tlOiMwMDAwMDA7c3Ryb2tlLW9wYWNpdHk6MSIKICAgICBpZD0icmVjdDg4MCIKICAgICB3aWR0aD0iNzYwLjU5MjEiCiAgICAgaGVpZ2h0PSIzMjAuMTE3NDMiCiAgICAgeD0iMC4yMzY5ODY0OSIKICAgICB5PSIwLjgyMDcwODg3IgogICAgIHJ5PSIzLjM1Njg5ZS0xNSIgLz4KICA8dGV4dAogICAgIHhtbDpzcGFjZT0icHJlc2VydmUiCiAgICAgaWQ9InRleHQ5NTUiCiAgICAgc3R5bGU9ImZvbnQtc3R5bGU6bm9ybWFsO2ZvbnQtd2VpZ2h0Om5vcm1hbDtmb250LXNpemU6NDBweDtsaW5lLWhlaWdodDoxLjI1O2ZvbnQtZmFtaWx5OnNhbnMtc2VyaWY7d2hpdGUtc3BhY2U6cHJlO3NoYXBlLWluc2lkZTp1cmwoI3JlY3Q5NTcpO2ZpbGw6IzAwMDAwMDtmaWxsLW9wYWNpdHk6MTtzdHJva2U6bm9uZTsiCiAgICAgdHJhbnNmb3JtPSJtYXRyaXgoMy41NTI5NDg4LDAsMCwzLjU1Mjk0ODgsMTEwLjI5MzgxLC00My43ODI5MTcpIj48dHNwYW4KICAgICAgIHg9IjE3LjgwODU5NCIKICAgICAgIHk9IjcyLjE2NDA2MiI+PHRzcGFuPkxPR088L3RzcGFuPjwvdHNwYW4+PC90ZXh0Pgo8L3N2Zz4K" alt="Some Logo" /></a></li>
</ul>
</nav>
</body>
</html>

您可以将align-items: center;添加到具有display: flex;的容器中，如下所示：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset='utf-8' />
<style type='text/css'>
* {
margin: 0;
padding: 0;
border: 0;
box-sizing: border-box;
}
#navbar {
background:silver;
}
#navbar ul {
display: flex;
flex-wrap: wrap;
list-style: none;
align-items: center;
}
#navbar ul > li {
flex: 1;
border: 5px dotted green;
}

#navbar a {
border: 5px dotted orange;
}
#navbar img {
height: 80px;
vertical-align:middle;
}   
</style>
<title></title>
</head>
<body>
<body>
<nav id="navbar">
<ul>
<li><a href="#">Some text</a></li>
<li><a id="logo" href="#"><img src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjxzdmcKICAgeG1sbnM6ZGM9Imh0dHA6Ly9wdXJsLm9yZy9kYy9lbGVtZW50cy8xLjEvIgogICB4bWxuczpjYz0iaHR0cDovL2NyZWF0aXZlY29tbW9ucy5vcmcvbnMjIgogICB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiCiAgIHhtbG5zOnN2Zz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciCiAgIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKICAgeG1sbnM6c29kaXBvZGk9Imh0dHA6Ly9zb2RpcG9kaS5zb3VyY2Vmb3JnZS5uZXQvRFREL3NvZGlwb2RpLTAuZHRkIgogICB4bWxuczppbmtzY2FwZT0iaHR0cDovL3d3dy5pbmtzY2FwZS5vcmcvbmFtZXNwYWNlcy9pbmtzY2FwZSIKICAgaWQ9IkNhbHF1ZV8xIgogICBkYXRhLW5hbWU9IkNhbHF1ZSAxIgogICB2aWV3Qm94PSIwIDAgNzYxLjEyIDMyMi4yMyIKICAgdmVyc2lvbj0iMS4xIgogICBzb2RpcG9kaTpkb2NuYW1lPSJsb2dvLnN2ZyIKICAgaW5rc2NhcGU6dmVyc2lvbj0iMS4wLjIgKGU4NmM4NzA4NzksIDIwMjEtMDEtMTUpIj4KICA8bWV0YWRhdGEKICAgICBpZD0ibWV0YWRhdGE1NSI+CiAgICA8cmRmOlJERj4KICAgICAgPGNjOldvcmsKICAgICAgICAgcmRmOmFib3V0PSIiPgogICAgICAgIDxkYzpmb3JtYXQ+aW1hZ2Uvc3ZnK3htbDwvZGM6Zm9ybWF0PgogICAgICAgIDxkYzp0eXBlCiAgICAgICAgICAgcmRmOnJlc291cmNlPSJodHRwOi8vcHVybC5vcmcvZGMvZGNtaXR5cGUvU3RpbGxJbWFnZSIgLz4KICAgICAgICA8ZGM6dGl0bGU+PC9kYzp0aXRsZT4KICAgICAgPC9jYzpXb3JrPgogICAgPC9yZGY6UkRGPgogIDwvbWV0YWRhdGE+CiAgPGRlZnMKICAgICBpZD0iZGVmczUzIj4KICAgIDxyZWN0CiAgICAgICB4PSIxNy44MDgwNTMiCiAgICAgICB5PSIzNi43NzM1NjIiCiAgICAgICB3aWR0aD0iNzExLjkxNzYxIgogICAgICAgaGVpZ2h0PSIyNDcuNTQzMjMiCiAgICAgICBpZD0icmVjdDk1NyIgLz4KICA8L2RlZnM+CiAgPHNvZGlwb2RpOm5hbWVkdmlldwogICAgIHBhZ2Vjb2xvcj0iI2ZmZmZmZiIKICAgICBib3JkZXJjb2xvcj0iIzY2NjY2NiIKICAgICBib3JkZXJvcGFjaXR5PSIxIgogICAgIG9iamVjdHRvbGVyYW5jZT0iMTAiCiAgICAgZ3JpZHRvbGVyYW5jZT0iMTAiCiAgICAgZ3VpZGV0b2xlcmFuY2U9IjEwIgogICAgIGlua3NjYXBlOnBhZ2VvcGFjaXR5PSIwIgogICAgIGlua3NjYXBlOnBhZ2VzaGFkb3c9IjIiCiAgICAgaW5rc2NhcGU6d2luZG93LXdpZHRoPSIxOTIwIgogICAgIGlua3NjYXBlOndpbmRvdy1oZWlnaHQ9IjEwMTYiCiAgICAgaWQ9Im5hbWVkdmlldzUxIgogICAgIHNob3dncmlkPSJmYWxzZSIKICAgICBpbmtzY2FwZTp6b29tPSIyLjA0Njk4MzQiCiAgICAgaW5rc2NhcGU6Y3g9IjM4Ni4wNjUyMiIKICAgICBpbmtzY2FwZTpjeT0iMTYxLjExNTAxIgogICAgIGlua3NjYXBlOndpbmRvdy14PSIwIgogICAgIGlua3NjYXBlOndpbmRvdy15PSIyNyIKICAgICBpbmtzY2FwZTp3aW5kb3ctbWF4aW1pemVkPSIxIgogICAgIGlua3NjYXBlOmN1cnJlbnQtbGF5ZXI9IkNhbHF1ZV8xIgogICAgIGlua3NjYXBlOnNuYXAtdGV4dC1iYXNlbGluZT0idHJ1ZSIgLz4KICA8cmVjdAogICAgIHN0eWxlPSJmaWxsOm5vbmU7c3Ryb2tlLXdpZHRoOjMuNzg7c3Ryb2tlLWRhc2hvZmZzZXQ6MC4zNzg7c3Ryb2tlOiMwMDAwMDA7c3Ryb2tlLW9wYWNpdHk6MSIKICAgICBpZD0icmVjdDg4MCIKICAgICB3aWR0aD0iNzYwLjU5MjEiCiAgICAgaGVpZ2h0PSIzMjAuMTE3NDMiCiAgICAgeD0iMC4yMzY5ODY0OSIKICAgICB5PSIwLjgyMDcwODg3IgogICAgIHJ5PSIzLjM1Njg5ZS0xNSIgLz4KICA8dGV4dAogICAgIHhtbDpzcGFjZT0icHJlc2VydmUiCiAgICAgaWQ9InRleHQ5NTUiCiAgICAgc3R5bGU9ImZvbnQtc3R5bGU6bm9ybWFsO2ZvbnQtd2VpZ2h0Om5vcm1hbDtmb250LXNpemU6NDBweDtsaW5lLWhlaWdodDoxLjI1O2ZvbnQtZmFtaWx5OnNhbnMtc2VyaWY7d2hpdGUtc3BhY2U6cHJlO3NoYXBlLWluc2lkZTp1cmwoI3JlY3Q5NTcpO2ZpbGw6IzAwMDAwMDtmaWxsLW9wYWNpdHk6MTtzdHJva2U6bm9uZTsiCiAgICAgdHJhbnNmb3JtPSJtYXRyaXgoMy41NTI5NDg4LDAsMCwzLjU1Mjk0ODgsMTEwLjI5MzgxLC00My43ODI5MTcpIj48dHNwYW4KICAgICAgIHg9IjE3LjgwODU5NCIKICAgICAgIHk9IjcyLjE2NDA2MiI+PHRzcGFuPkxPR088L3RzcGFuPjwvdHNwYW4+PC90ZXh0Pgo8L3N2Zz4K" alt="Some Logo" /></a></li>
</ul>
</nav>
</body>
</html>

像这样更改导航栏css

#navbar ul {
display: flex;
flex-direction:column;
align-items:center;
flex-wrap: wrap;
list-style: none;
}

相关内容

最新更新

热门标签：