如何将徽标图像置于标题中心

问题描述：

我想在导航栏的中心显示徽标。目前我已经做得非常小，以确保我现在可以看到它，但之后会将尺寸分类。如何将徽标图像置于标题中心

这里是我多么希望它看起来一个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; 
}

你尝试加入一些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>

试试这个版本。

嗨@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元素应该不会受到影响，但图像将被居中。

答

添加容器类前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; 
}

如何将徽标图像置于标题中心

相关推荐