gpt4 book ai didi

html - 如何在页眉中将 Logo 图像居中

转载 作者:行者123 更新时间:2023-11-28 04:22:00 25 4
gpt4 key购买 nike

我想要一个标志出现在导航栏的中央。目前我已经把它做得非常小只是为了确保我现在可以看到它但之后会整理尺寸。

这是我希望它看起来如何的 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;
}

最佳答案

早上好!

通常你想控制 nav ulnav ul li 元素一起出现而不使用 float 和重填充。在这里看看我的修订。对于 Logo ,您可以将其放入 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{
text-align: center;
display: table;
}

nav li {
display: table-cell;
vertical-align: middle;
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>
<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>

试试这个修订版。

关于html - 如何在页眉中将 Logo 图像居中,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42165326/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com