如何在导航栏中垂直居中 link

Question

我想将我的个人资料和技能链接放在导航栏的中央。你可以看看我这里有什么： http://rikinkatyal.me/ 我尝试了很多方法，none 似乎有效。提前致谢。

Answer 1

将 display:inline-block; 添加到图像的定位元素容器

<div id="header">
    <div class="navBar">
        <a href="#projects" id="projectButton" class="navBarLink" style="display: inline;">PROJECTS</a>
        <a href="#main" style="display: inline-block;"> <!-- Add this style attribute here -->
            <img class="logo" id="logo" draggable="False" src="images/logo.png" style="display: inline-block;">
        </a>
        <a href="#skills" id="skillButton" class="navBarLink" style="display: inline;">SKILLS</a>
        <a href="#contact" id="contactButton" class="contactButton" style="display: inline;">CONTACT</a>
    </div>
</div>

结果：

Answer 2

与其搞乱内联样式，不如清理你的 HTML 并将你的 HTML 和 CSS 替换为 'index.css' 文件中的 header以下 CSS 和 HTML.

CSS 对于 header

#header {
    position: fixed;
    height: 70px;
    width: 100%;
    background-image: url(http://rikinkatyal.me/images/header.png);
    background-size: 100%;
    background-repeat: repeat;
    margin: 0px;
    z-index: 2;
}
.navBar {
    text-align:center;
}
.navBar a {
    text-decoration: none;
    color: #fff;
    font-family:'Source Sans Pro';
    font-weight: 300;
    -webkit-transition: all 0.5s ease-in-out;
    vertical-align: middle;
    display:inline-block;
}
.navBar .contactButton {
    top: 17px;
    right: 10px;
    float: right;
    position: fixed;
    -webkit-border-radius: 28;
    -moz-border-radius: 28;
    border-radius: 28px;
    font-family:'Source Sans Pro';
    font-weight: 300;
    color: #fff;
    font-size: 17px;
    padding: 5px 13px 5px 13px;
    border: solid #fff 2px;
    -webkit-transition: all 0.5s ease-in-out;
}

HTML 对于 header

<div id="header">
  <div class="navBar">  
    <a href="#projects" id="projectButton">PROJECTS</a>
    <a href="#main">
      <img id="logo" draggable="False" src="http://rikinkatyal.me/images/logo.png" height="70"/></a>
    <a href="#skills" id="skillButton">SKILLS</a>
    <a href="#contact" id="contactButton" class="contactButton">CONTACT</a>
  </div>
</div>

观看演示 => http://jsfiddle.net/pxhw53my/

Answer 3

在导航栏 div 上，将显示设置为 table，在嵌套锚点上，将显示设置为允许垂直对齐的 table-cell。

.navBar {
  margin: 0 auto; //text-align center won't work with a table display (in this instance)
  display: table;
}

.navBar a {
  display: table-cell;
  vertical-align: middle;
}

此外，请记住 table 显示不能使用边距，只能使用填充。

如何在导航栏中垂直居中 link

How to center link in nav bar vertically

html

css

web