如何垂直居中导航栏中的链接

Question

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

Answer 1

不要乱用内联样式，而是清理HTML并替换HTML＆amp;您的＆＃39; index.css＆＃39;中标题的CSS文件包含以下CSS和HTML。

标题的CSS

#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

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

在demo =＆gt;中观看此内容http://jsfiddle.net/pxhw53my/

Answer 2

将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 3

在navBar 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;
}

另外，请记住，表格显示不能使用边距，只能填充。