如何使导航菜单中的文本居中
Posted
技术标签:
【中文标题】如何使导航菜单中的文本居中【英文标题】：How to center text in navigation menu 【发布时间】：2022-01-17 11:38:01 【问题描述】：我想将导航菜单中的文本与左侧的徽标对齐，使其垂直居中。现在，它与顶部对齐，这是我不想要的。我尝试对导航菜单中的文本使用 align-items center，但无法正常工作。
Navigation Picture
body
margin:0;
padding:0;
.header
background-color: salmon;
height: 100px;
.header img
float: left;
width: auto;
height: 100%;
.header h1
margin-top: 0px;
padding-top:10px;
left: 10px;
ul li
display: inline;
font-weight: bold;
align-items: center;
li a
align-items: 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>
<link rel = "stylesheet" href="Logo - Copy.css">
</head>
<body>
<div class="header">
<img src="Small_scream.png">
<ul>
<li>
<a>My website name</a>
<a>Home</a>
<a>Fine</a>
</li>
</ul>
</div>
</body>
</html>【问题讨论】：
【参考方案1】：垂直对齐某物的通用方法是使用 vertical-align: middle ，但如果父/容器还没有理由比您要对齐的东西高，这不起作用。
设计此布局的一种通常更简单的方法是使用 flexbox ，然后您可以使用诸如 align-items 之类的东西。
如果您对此感兴趣，请联系here is a good place to start。
【讨论】：
【参考方案2】：请看下面使用 flexbox 的示例。
body
margin: 0;
padding: 0;
.header
background-color: salmon;
height: 100px;
display: flex;
align-items: center;
gap: 10px;
<div class="header">
<img src="https://via.placeholder.com/100">
<a>My website name</a>
<a>Home</a>
<a>Fine</a>
</div>【讨论】：
【参考方案3】：这是您查询的解决方案。
您必须在标题类中添加 CSS 而不是 ul li & li a。
.header
background-color: salmon;
height: 100px;
display: flex;
align-items: 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>
<link rel = "stylesheet" href="Logo - Copy.css">
</head>
<body>
<div class="header">
<img src="Small_scream.png">
<ul>
<li>
<a>My website name</a>
<a>Home</a>
<a>Fine</a>
</li>
</ul>
</div>
</body>
</html>
【讨论】：
以上是关于如何使导航菜单中的文本居中的主要内容，如果未能解决你的问题，请参考以下文章
请问如何设置bootstrap导航栏中的菜单项居中均匀分布？谢谢