ロゴイメージをヘッダーの中央に配置する方法

ナビゲーションバーの中央にロゴを表示したいと思います。現時点では私はそれを本当に小さくするようにしましたが、今はそれを見ることができますが、後でサイズを並べ替えることになります。ここでロゴイメージをヘッダーの中央に配置する方法

が、私はそれを見てみたいかのPhotoshopのデザインである：ここで https://gyazo.com/c1b0d25c4fe94a33edf3937576324229

は、それが現在どのように見えるかです： https://gyazo.com/4432c9c4874a082a9c4a4c5eb6d7af12

任意の助けいただければ幸いです。

HTML：

<body id="chesters"> 

    <header> 
     <nav> 
      <ul> 
      <li><a href="Menu.html">Menu</a></li> 
      <li><a href="Burritos.html">Burritos</a></li> 
       <li><a href="index.html"><img class="header-image" src="assets/Headerlogo1.png"></a></li> 
      <li><a href="Contact.html">Contact Us</a></li> 
      <li><a href="About.html">About Us</a></li> 
      </ul> 
     </nav> 
    </header> 

<div id="Page"> 



</div> <!-- Page --> 

</body>

CSS：

body { 
    font-family: 'Open Sans', sans-serif; 
    background-color: #f3f3f3; 
    color: #666; 
    margin: 0px; 
    padding: 0px; 
} 

#Page { 
    padding-top: 100px; 
} 


header { 
    background-color: #1c1c1b; 
    font-family: 'Century gothic'; 
    font-size: 180%; 
    height: 100px; 
    width: 100%; 
    border-bottom: solid; 
    border-bottom-color: #009641; 
    border-bottom-width: 5px; 
    position: fixed; 
    line-height: 50px; 
    z-index: 1000; 
    overflow: hidden; 
    transition: all 0.8s ease; 
} 

.header-image { 
    /*width: 100px; 
    height: 400px;*/ 
    align-content: center; 
    margin-top: -30px; 
} 


#center-column { 
    background-color: white; 
    width: 1080px; 
    height: 100%; 
    box-shadow: 0px 1px 5px #888888; 
    margin: 0 auto; 
    padding-bottom: 10px; 
} 

nav { 

} 

nav ul { 
    text-align: center; 
    display: table; 
} 

nav li { 
    display: table-cell; 
    vertical-align: middle; 
    /*display: inline;*/ 
    padding: 0 10px; 
} 

nav li a { 
    color: #009641; 
    text-decoration: none; 
} 

nav li a:hover { 
    color: #e2030e; 
}

出典

2017-02-10 Xander

は、あなたが要素にある程度のマージンとパディングを追加してみましたか？ –

おはようございます！

通常、フロートと重いパッドを使用せずに、nav ulとnav ul liの要素の外観を一緒に制御します。ここで私の改訂を見てください。ロゴのために、あなただけのli要素にそれを置くことができます。

body { 
 
    font-family: 'Open Sans', sans-serif; 
 
    background-color: #f3f3f3; 
 
    color: #666; 
 
    margin: 0px; 
 
    padding: 0px; 
 
} 
 

 
#Page { 
 
    padding-top: 100px; 
 
} 
 

 

 
header { 
 
    background-color: #1c1c1b; 
 
    font-family: 'Century gothic'; 
 
    font-size: 180%; 
 
    height: 140px; 
 
    width: 100%; 
 
    border-bottom: solid; 
 
    border-bottom-color: #009641; 
 
    border-bottom-width: 5px; 
 
    position: fixed; 
 
    line-height: 50px; 
 
    z-index: 1000; 
 
} 
 

 
nav { 
 
} 
 
nav ul{ 
 
\t text-align: center; 
 
\t display: table; 
 
\t } 
 

 
nav li { 
 
    display: table-cell; 
 
\t vertical-align: middle; 
 
\t padding: 0 10px; 
 
} 
 

 
nav li a { 
 
    color: #009641; 
 
    text-decoration: none; 
 
} 
 

 
nav li a:hover { 
 
    color: #FFF; 
 
}

<body id="chesters"> 
 

 
    <header> 
 
     <nav> 
 
      <ul> 
 
      <li><a href="Menu.html">Menu</a></li> 
 
      <li><a href="Burritos.html">Burritos</a></li> 
 
\t \t \t <li><img class="header-image" src="chesters.png"></li> 
 
      <li><a href="Contact.html">Contact Us</a></li> 
 
      <li><a href="About.html">About Us</a></li> 
 
      </ul> 
 
     </nav> 
 
    </header> 
 

 
<div id="Page"> 
 

 

 

 
</div> <!-- Page --> 
 

 
</body>

このリビジョンを試してみてください。

出典

2017-02-10 17:38:53 scoopzilla

こんにちは@ sucoopzillaこの種のものは動作しましたが、何かがまだ正しくありません。ここでは、変更を加えた後の様子を以下に示しますhttps://gyazo.com/c50e24f4d151af0c804b35b29cda5ec4 Photoshopの画像ファイルは100pxの高さで400pxの幅で、すべての高さ/幅のものを.header-imageクラスから削除しました – Xander

ああ、私の画像クラスのトップ30は、このようになっています。https://gyazo.com/e1c24195ff2db93db8d27e4c4de791c3画像はうまく見えますが、とにかくリンクを並べ替えるのですか？ Thanks @ scoopzilla – Xander

@EthanBristow改訂されたコードを見てください。 'ul'をテーブルとして、' li'をテーブルセルとして、垂直に整列させてみましょう。負のパディングや浮動小数点のようなものから離れるようにしてください:) – scoopzilla

は、あなたのCSSにこれを追加します。

nav ul { 
    text-align: center; 
}

liの要素が影響を受けることはないはずですが、画像が中央に表示されます。

出典

2017-02-10 17:45:32 MSoRMvzH8g

はNAVの前にコンテナクラスを追加し、最大幅と余白を設定：0オート

<body> 
     <header> 
      <div class="container"> 
       <nav> 
        <ul> 
         <li><a href="Menu.html">Menu</a></li> 
         <li><a href="Burritos.html">Takeaway Burritos</a></li> 
         <li><img class="header-image" src="assets/Headerlogo1.png"></li> 
         <li><a href="Contact.html">Contact Us</a></li> 
         <li><a href="About.html">About Us</a></li> 
        </ul> 
       </nav> 
      </div> 
     </header> 
     <div id="Page"> 
     </div> 
     <!-- Page --> 
    </body>

body { 
    font-family: 'Open Sans', sans-serif; 
    background-color: #f3f3f3; 
    color: #666; 
    margin: 0px; 
    padding: 0px; 
} 

#Page { 
    padding-top: 100px; 
} 

header { 
    background-color: #1c1c1b; 
    font-family: 'Century gothic'; 
    font-size: 180%; 
    height: 140px; 
    width: 100%; 
    border-bottom: solid; 
    border-bottom-color: #009641; 
    border-bottom-width: 5px; 
    position: fixed; 
    line-height: 50px; 
    z-index: 1000; 
} 

.container { 
    max-width: 1282px; 
    margin: 0 auto; 
} 

nav {} 

nav ul { 
    text-align: center; 
    display: table; 
} 

nav li { 
    display: table-cell; 
    vertical-align: middle; 
    padding: 0 10px; 
} 

nav li a { 
    color: #009641; 
    text-decoration: none; 
    padding-right: 20px; 
} 

nav li a:hover { 
    color: #FFF; 
}

出典

2017-02-11 12:04:23

ロゴイメージをヘッダーの中央に配置する方法

答えて

関連する問題