我是Web开发的新手,目前正在使用固定顶部导航栏的网页进行工作。我的徽标位于列表的中心,链接位于列表的外部。我希望链接垂直居中。我将包括屏幕截图和代码。也许你可以帮我吗?非常感谢!感谢您的宝贵时间。
HTML:
<div class="header">
<div class="table">
<div class="navbar">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="#">Before & After</a></li>
<li><img src="photos/logo.png"> </li>
<li><a href="#">Portfolio</a></li>
<li><a href="https://www.facebook.com/">Facebook</a></li>
<li> <script src="js/email.js"></script>
</ul>
</div>
</div>
</div>
CSS:
@font-face {
font-family: offbeat;
src: url(offbeat.woff);
font-weight: normal;
font-style: normal;
}
body {
margin: 0 auto;
padding: 0;
background: rgb(209,202,178);
}
.header {
background: rgb(175,166,135);
width: 100%;
height: 100px;
margin: 0px;
padding: 0px;
position: fixed;
top: 0px;
z-index: 2;
border-bottom: 1px solid rgb(102,102,102);
}
.table {
display: table;
float: left;
left: 50%;
width: 1150px;
height: 100px;
line-height: 100px;
overflow: auto;
position: absolute;
}
.logo img {
z-index: 4;
position: relative;
left: 50%;
}
.navbar {
float: left;
right: 48.5%;
position: relative;
}
.navbar li {
display: inline;
padding: 0px;
margin: 0 auto;
width: 100%;
margin-right: 40px;
text-shadow: 1px 1px rgb(115,109,88);
font-family: offbeat;
font-size: 20px;
letter-spacing: 5px;
white-space: nowrap;
overflow: auto;
}
.navbar a {
text-decoration: none;
color: rgb(255,255,255);
text-align: center;
border-bottom: 1px solid;
border-color: rgb(255,255,255);
padding: 10px;
margin: 5px;
white-space: nowrap;
}
.navbar a:hover {
background-color: rgb(135,127,99);
}
我希望使用line-height实现这一目标。将父容器.navbar的高度设置为100px,然后在.navbar li上将行高度设置为100px。
这意味着链接文本始终位于导航栏的中心。为了确保徽标在中心,我将在中间添加垂直对齐。
另外,我希望实现盒装大小,这对于使用填充的布局很有帮助。
@font-face {
font-family: offbeat;
src: url(offbeat.woff);
font-weight: normal;
font-style: normal;
}
*,
*:before,
*:after {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
body {
margin: 0 auto;
padding: 0;
background: rgb(209, 202, 178);
}
.header {
background: rgb(175, 166, 135);
width: 100%;
height: 100px;
margin: 0px;
padding: 0px;
position: fixed;
top: 0px;
z-index: 2;
border-bottom: 1px solid rgb(102, 102, 102);
}
.navbar {
margin: 0;
padding: 0;
text-align: center;
}
.navbar ul {
margin: 0;
padding: 0;
overflow: hidden;
}
.navbar li {
display: inline-block;
padding: 0px;
margin-right: 40px;
text-shadow: 1px 1px rgb(115, 109, 88);
font-family: offbeat;
font-size: 20px;
letter-spacing: 5px;
line-height: 100px;
vertical-align: middle;
}
.navbar img {
vertical-align: middle;
}
.navbar a {
text-decoration: none;
color: rgb(255, 255, 255);
text-align: center;
border-bottom: 1px solid;
border-color: rgb(255, 255, 255);
padding: 10px;
margin: 5px;
white-space: nowrap;
}
.navbar a:hover {
background-color: rgb(135, 127, 99);
}
<div class="header">
<div class="navbar">
<ul>
<li><a href="index.html">Home</a>
</li>
<li><a href="about.html">About</a>
</li>
<li><a href="#">Before & After</a>
</li>
<li>
<img src="http://placehold.it/50x50">
</li>
<li><a href="#">Portfolio</a>
</li>
<li><a href="https://www.facebook.com/">Facebook</a>
</li>
<li>
<script src="js/email.js"></script>
</ul>
</div>
</div>
当您使用许多必需的定位技术时,我会编辑您的基本代码。请与您的代码进行比较。
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句