2行のliを横並びで画面中央寄せに配置したい

前提・実現したいこと

htmlとcssを使ってLP制作をしています。

.　　✉　　　　　　????
お問い合わせ　ご利用ガイド

上記のような画像と文字をセットにしたリストを横並び・画面の中央寄せに配置したいです。

発生している問題・エラーメッセージ

画面中央にliをもってくることができていません。

該当のソースコード

####【HTML】

<body>
<header>
		<nav class="header-nav">
            <ul>
				<li><img src="img/navi-concept.png"><p>サービスコンセプト</p></li>
				<li><img src="img/navi-item.png"><p>アイテム一覧</p></li>
				<li><img src="img/logo-mainvisual.png"></li>
				<li><img src="img/navi-userguide.png"><p>ご利用ガイド</p></li>
				<li><img src="img/navi-voice.png"><p>お客さまの声</p></li>
			</ul>
		</nav>
	</header>
</body>

####【CSS】

li{
	list-style:none;
}
.header-nav ul li{
	text-align:center;
	display:inline-block;
}

試したこと

上記ソースコードで試しましたが画面左寄せのままです。

補足情報（FW/ツールのバージョンなど）

kei344

2020/05/12 01:30

（質問文は編集できます）質問文のHTML/CSSはそれぞれコードブロックで囲んでいただけませんか？ ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。

webeginner

2020/05/14 09:47

ご指摘いただきありがとうございました！！ <code>ボタンを押すと皆さまがされているようにできるのですね。知ることができてよかったです。

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

回答1件

ベストアンサー

CSS Flexbox で横並びにする方法をお勧めします。

css
1li{
2  list-style:none;
3}
4.header-nav ul li{
5  text-align:center;
6/*  display:inline-block; 不要 */
7}
8
9/*以下追加*/
10.header-nav ul {
11  display: flex; /*横並び*/
12  justify-content: center; /*アイテムの中央寄せ*/
13}