html - 悬停问题的字体大小增加？

Question

我遇到的问题是，当我将鼠标悬停在主页上时，字体大小会增加，但文本会向下移动。我试过转换翻译，我试过相对位置然后顶部 25px 或其他但没有工作。

这是悬停部分:

home:hover{   
    font-size: 25px;

}

这是 HTML 部分:

<nav> |<home> Home </home>| <photos> Photos </photos> | <contact> Contact </contact> | </nav>

这是导航文本的 CSS:

nav{   
    color: #ddfeff;
    font-family: Impact, sans-serif;
    text-align: center;
    padding: 5px 0 5px 0;
    word-spacing: 125px

}

home{
    color: #ddfeff;
    font-family: Impact, sans-serif;
    text-align: center;
    padding: 5px 0 5px 0;
    word-spacing: 125px

}

photos{
    color: #ddfeff;
    font-family: Impact, sans-serif;
    text-align: center;
    padding: 5px 0 5px 0;
    word-spacing: 125px

}

contact{   
    color: #ddfeff;
    font-family: Impact, sans-serif;
    text-align: center;
    padding: 5px 0 5px 0;
    word-spacing: 125px

}

如果您认为您需要任何其他脚本，请告诉我。

提前致谢

Answer 1

添加垂直对齐如何？

nav > * {
    vertical-align: middle
}

http://jsfiddle.net/dchkdbvq/