HTML CSS格式化菜单块/悬停背景

Question

我想知道什么是正确的＆＃39;改变我当前菜单的方法如下：
对此：

我遇到的问题是让按钮进入这些块会改变悬停时的背景，垂直对齐，我是否使用填充？块？表？帮助：S

（颜色并不重要）

CSS：

.menu{
        clear: both;
        background-image:url(meniuBG.jpg);
        height:55px;
        line-height: 10px;
      }

.menu a{

        text-align: center;
        text-decoration: none;
        font-style:italic;
        color:rgb(193,193,193);
        margin-right: 25px;
        margin-left: 25px;
    }

HTML（无明显原因）：

<div class="meniu">

        <a href="#">NAUJIENOS</a>
        <a href="#">KREPSINIO VADOVAS</a>
        <a href="#">TRENIRUOTES</a>
        <a href="#">IDOMYBES</a>
        <a href="#">GALERIJA</a>
        <a href="#">APIE MUS</a>

</div>

Answer 1

.menu {
        ...
        height:55px;
        /* line-height: 10px;  delete this  */
}

.menu a { 
        ...
        line-height: 55px; /* add this */
}

因为您希望垂直居中<a>，所以有很多方法可以在google上搜索很多tuto。

我给你的解决方案是让line-height等于heigh（55px）。当你的文字只在一行时，这个解决方案就可以工作。

并且悬停时只需<a> display: inline-block;并将margin替换为padding

.menu a{

text-align: center;
text-decoration: none;
font-style: italic;
color: rgb(193,193,193);
/* margin-right: 25px; */
/* margin-left: 25px; */
padding: 0 25px;
line-height: 55px;
display: inline-block;

}

这里是FIDDLE

Answer 2

尝试添加此

.menu a{
    text-align: center;
    text-decoration: none;
    font-style:italic;
    color:rgb(193,193,193);
    margin-right: 25px;
    margin-left: 25px;
    line-height:55px;
    display: inline-block;
}
.menu a:hover{
    background-color: #E7550C;
}