html - 带图像的 CSS 和 HTML 导航栏列表

Question

我是网络开发的半新手，目前正在开发具有固定顶部导航栏的网页。我在列表的中心有我的标志，在它外面有我的链接。我希望链接垂直居中。我将包括一个屏幕截图和代码。也许你能帮我？多谢!感谢您的宝贵时间。

Screenshot of Navbar

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);
}

Answer 1

我希望使用行高来实现这一点。将父容器 .navbar 的高度设置为 100px，然后将 .navbar li 的行高设置为 100px。

这意味着链接文本始终位于导航栏的中心。为确保 Logo 位于中心，我会添加垂直居中对齐。

作为奖励，我希望实现 box-sizing 它对使用 padding 的布局有很大帮助。

@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>

我编辑了你的基本代码，因为你使用了很多需要的定位技术。请与您的代码进行比较。