如何將徽標圖像置於標題中心

我想在導航欄的中心顯示徽標。目前我已經做得非常小，以確保我現在可以看到它，但之後會將尺寸分類。如何將徽標圖像置於標題中心

這裏是我多麼希望它看起來一個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

你嘗試加入一些margin和padding的元素？ –

早上好！

通常情況下，您想要控制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

嗨@scoopzilla這種工作，但有些東西仍然是不正確的。以下是進行這些更改後現在的樣子https://gyazo.com/c50e24f4d151af0c804b35b29cda5ec4我的photoshop圖像文件是100px高度，寬度爲400px，我從.header-image類中刪除了所有高度/寬度的東西 – Xander

ah I added margin-頂部-30到我的圖像類，現在它看起來像這個https://gyazo.com/e1c24195ff2db93db8d27e4c4de791c3圖像似乎很好，但無論如何排序鏈接了？謝謝@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

如何將徽標圖像置於標題中心

回答

相關問題