如何在导航栏上垂直居中显示这些按钮

Question

I'm struggling to get these buttons on the right and the heading on the left centered vertically on my navbar. I'm not using Bootstrap. I've tried a number of combinations of padding and margins and can't seem to make it work. Can anyone help please?

HTML:

<header>
<nav>
    <h1>Jason</h1>
    <div class="navbar-box">
        <ul id="navbar-links">
            <button>
                <li><a href="#">About</a></li>
            </button>
            <button>
                <li><a href="#">Portfolio</a></li>
            </button>
            <button>
                <li><a href="#">Contact</a></li>
            </button>
        </ul>
    </div>
</nav>
</header>

CSS:

nav {
  background-color: #061839;
  color: white;
  height: auto;

}
.navbar-box {
  background-color: #061839;
  color: white;
  height: 25px;
}
h1 {
  margin-top: 5px;
  padding-top: 40px;
  padding-left: 30px;
  font-size: 40px;
}
ul {
   list-style-type: none; 
}
li a {
  display: inline;
  float:right;
}
button {
    background-color: #4D638C;
    border: none;
    color: white;
    margin-right: 20px;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    float:right;
    border-radius:12px;

}

Answer 1

尝试添加display：inline-block和vertical-align：middle to heading（h1）和buttons容器.navbar-box

Answer 2

使用应该集中他们的margin auto