Centering vertical in header navbar

This question already has an answer here:

Vertically align text next to an image? 20 answers

---

As mentioned by j08691 (and others), the property you're looking for is vertical-align:middle .

One caveat, however: you have to remember that both the image and the anchor tag next to it by default have vertical-align:baseline - meaning, if you only vertically center one of them, its baseline will become vertically aligned to the center of the sibling element, rather than its middle. (Depending on which element you apply this to, this could arguable worsen your alignment problem.)

Here are the modified/added style blocks you'll be needing:

a[href="#top"] {
  margin-left: 100px;
  vertical-align: middle;
}
#header img {
  vertical-align: middle;
}

#header nav {
  display: inline;
}
#header {
  background: #5D6D63;
  padding: 28px 0 26px;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000;
  width: 100%;
}
#header nav ul {
  float: right;
  margin: 0px;
  margin-right: 100px;
}
li {
  list-style-type: none;
  float: left;
  margin-left: 46px;
}
a[href^="#"] {
  color: #fff;
  font-size: 20px;
  font-weight: bold;
  letter-spacing: -1px;
  text-decoration: none
}
a[href="#top"] {
  margin-left: 100px;
  vertical-align: middle;
}
#header img {
  vertical-align: middle;
}

<header id="header">
  <a href="#top">Name</a>
  <a href="https://github.com/">
    <img src="assets/imgs/GitHub-Mark-Light-64px.png" alt="GitHub" height="24" width="24">
  </a>
  <nav id="navbar">
    <ul>
      <li><a href="#">Link 1</a>
      </li>
      <li><a href="#">Link 2</a>
      </li>
      <li><a href="#">Link 3</a>
      </li>
    </ul>
  </nav>
</header>

---

Because the default vertical alignment for inline elements is baseline and you want middle . So add a rule like:

img {
  vertical-align:middle;
}

#header nav{
    display:inline;
}
#header {
    background: #5D6D63;
    padding: 28px 0 26px;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1000;
    width: 100%;

}
#header nav ul {
    float: right;
    margin: 0px;
    margin-right: 100px;
}
li {
    list-style-type: none;
    float: left;
    margin-left: 46px; 
}
a[href^="#"]{
    color: #fff;
    font-size: 20px;
    font-weight: bold;
    letter-spacing: -1px;
    text-decoration: none
}

a[href="#top"] {
    margin-left:100px;
}
img {
  vertical-align:middle;
}

 <header id="header"> 
        <a href="#top">Name</a>
        <a href="https://github.com/">
            <img src="http://www.uoyabause.org/images/logos/GitHub-Mark-Light-64px.png" alt="GitHub" height="24" width="24">
        </a>
        <nav id="navbar">
          <ul>
            <li><a href="#">Link 1</a></li>
            <li><a href="#">Link 2</a></li>
            <li><a href="#">Link 3</a></li>       
          </ul>
        </nav>
    </header>

---

使图像Verticla对齐：添加Css像这样：

a img{
   vertical-align:middle
}

链接地址: http://www.djcxy.com/p/41534.html

上一篇: 内联元件的中间垂直对齐稍微偏离

下一篇: 在标题导航栏中垂直居中