ロゴをナビゲーションバーの中央に配置したい

###前提・実現したいこと
ここに質問したいことを詳細に書いてください

ヤフージャパンのトップページの様にナビゲーションバーの中央にロゴを表示するにはどのようなHTML・CSSを書けば良いのでしょうか？

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

エラーメッセージ

###該当のソースコード

html,css
1ここにご自身が実行したソースコードを書いてください

###試したこと
課題に対してアプローチしたことを記載してください
ul>liに対してfloat:left;
を
<img>に対してmargin: 0 auto
をやってみました
###補足情報(言語/FW/ツール等のバージョンなど)
より詳細な情報

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

回答3件

ベストアンサー

＞ヤフージャパンのトップページの様に
お手本にしたいサイトがあるのであれば、デベロッパーツールでコードを見てみるのが手っ取り早いと思います。
すでに実用されているので間違いないし、同じようなデザインのサイトでも違う発想でコーディングしていたりして面白いです。

ロゴはナビの外に出してあげたほうが構造的にきれいだと思います。

html
1<header>
2  <h1><a href="/"><img src="hoge"></a></h1>
3  <ul> 
4    <li><a href="">hoge1</a></li>
5    <li><a href="">hoge2</a></li> 
6    <li><a href="">hoge3</a></li> 
7    <li><a href="">hoge4</a></li> 
8  </ul>
9</header>

cssはいろんな方法がありそうです。
質問者さんの思いついたmargin:0 autoやfloat:leftを使う方法だと、例えばこんな風にできます。

css
1header{
2  position: relative;
3  width: 800px;
4}
5h1{
6  width: 200px;
7  height: 50px;
8  margin: 0 auto;
9}
10ul{
11  position: absolute;
12  top: 0;
13  left: 0;
14  width: 100%;
15}
16li{
17  float: left;
18  width: calc( ( 100% - 200px ) / 4);
19}
20li:nth-child(3){
21  margin-left: 200px;
22}