如何使导航菜单中的文本居中答案

【问题标题】：How to center text in navigation menu如何使导航菜单中的文本居中
【发布时间】：2022-01-17 11:38:01
【问题描述】：

我想将导航菜单中的文本与左侧的徽标对齐，使其垂直居中。现在，它与顶部对齐，这是我不想要的。我尝试对导航菜单中的文本使用 align-items center，但无法正常工作。

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>

【问题讨论】：

标签： css navigation

【解决方案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>

【讨论】：