如何使<ul>中的<li>元素垂直居中? [重复]

我正在通过创建导航栏来尝试html和CSS。我发现很难使用html定位元素。在Android上,这样做很容易(嗯,我花了一些时间才知道如何做)。

header {
    width: 100%;
    position: fixed;
    left: 0;
    top: 0;
}

nav {
    height: 64px;
    background: black;
    color: white;
}

div#brand {
    width: 100px;
    background: gray;
    vertical-align: middle;
    margin-left: 2em;
    float: left;
}
div p {
    display: block;
    margin: 0;
    line-height: 64px;
    text-align: center;
}

div#menu {
    float: right;
}

nav ul {
    padding-left: 0px;
    margin: 0;
}

nav li {
    height: 100%;
    display: inline-block; /* to make list horizontal */
    margin: 0 1.25em;
}

nav li:hover {
    background: gray;
}

nav li a {
    display: inline-block;
    text-decoration: none;
    color: white;
    text-align: center;
}
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mijn navbar</title>

    <!-- include index.css -->
    <link rel="stylesheet" type="text/css" href="index.css">
</head>
<body>
    <header>
        <nav>
            <div id="brand"><p>My Brand</p></div>
            <div id="menu">
                <ul>
                    <li><a href="">LinkedIn</a></li>
                    <li><a href="">Github</a></li>
                    <li><a href="">Twitter</a></li>
                </ul>
            </div>
        </nav>
    </header>    
</body>
</html>

如何获得与导航栏垂直居中的li元素的内容或文本?