How to center text in navigation menu-CodePudding

I would like to align the text in my navigation menu respective to the logo on the left, so it is centered vertically. Right now, it is aligned to the top, which I don't want. I tried using align-items center for the text in the navigation menu, but wasn't able to work.

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 >
    <img src="Small_scream.png">
    <ul>
      <li>
        <a>My website name</a>
        <a>Home</a>
        <a>Fine</a>
      </li>
    </ul>
  </div>
</body>
</html>

CodePudding user response：

The generic way to vertically align something is with vertical-align: middle , though that doesnt work if the parent/container doesn't already have reason to be taller than the thing you're trying to align.

A generally easier way to design this layout would be using flexbox , then you can use things such as align-items. If you're interested in more about that, then here is a good place to start.

CodePudding user response：

Please see below an example using flexbox.

body {
  margin: 0;
  padding: 0;
}

.header {
  background-color: salmon;
  height: 100px;
  display: flex;
  align-items: center;
  gap: 10px;
}

<div >
  <img src="https://via.placeholder.com/100">
  <a>My website name</a>
  <a>Home</a>
  <a>Fine</a>
</div>

CodePudding user response：

Here is solution for your query.

You will have to add CSS in header class instead of 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 >
    <img src="Small_scream.png">
    <ul>
      <li>
        <a>My website name</a>
        <a>Home</a>
        <a>Fine</a>
      </li>
    </ul>
  </div>
</body>
</html>