上下の中央揃えとliを等間隔にしたい

navのh1とulを上下中央揃えしたいです。

それとliを等間隔にしたいです。

html
1<nav>
2        <h1>KEI NISHIKORI.COM</h1>
3        <ul>
4          <li>ブログ</li>
5          <li>試合結果</li>
6        　<li>公式アプリ</li>
7        </ul>
8      </nav>

css
1nav {
2  display: block;
3  width: 100%;
4  height: 50px;
5  margin: 0;
6  position: fixed;
7  background: rgba(0,0,0,0.3);
8  z-index: 4;
9}
10
11h1 {
12  display: inline-block;
13  
14}
15
16nav ul {
17  display: inline-block;
18  position: absolute;
19  right: 0;
20  padding: 0;
21}
22
23nav ul li {
24  display: inline;
25  list-style: none;
26}

行動規範の内容に同意します

回答2件

CSS
1nav {
2  display: flex;
3  align-items: center;
4  width: 100%;
5  height: 50px;
6  margin: 0;
7  position: fixed;
8  background: rgba(0, 0, 0, 0.3);
9  z-index: 4;
10}
11
12nav ul {
13  margin-left: auto;
14}
15
16nav ul li {
17  display: inline;
18  margin-right: 20px;
19}
20

投稿2018/10/22 05:37

root_jp

総合スコア4666

ベストアンサー

いろいろな方法があると思いますがnavとulにflex使用の一例です。
※「<li>公式アプリ</li>」の前に全角スペースが入っていたので、削除しています。

CSS
1* {
2  margin: 0;
3  padding: 0;
4}
5
6nav {
7  width: 100%;
8  height: 50px;
9  position: fixed;
10  background: rgba(0,0,0,0.3);
11  z-index: 4;
12  display: flex;
13  align-items: center;
14  justify-content: space-between;
15}
16
17nav ul { 
18  display: flex;
19  justify-content: space-around;
20  align-items: center;
21  width: 20%;
22}
23
24nav ul li {
25  list-style: none;
26}