0
我有一个带有按钮的导航栏作为背景图像，当我将鼠标悬停在上面时会发生变化。但是，我似乎无法将按钮居中。如何将NAV栏与背景图像对齐？
nav {
padding: 10px 0 25px 0;
background-color: blue;
}
.nave {
width: 100%;
max-width: 1200px;
margin: 0 auto;
padding: 0 30px;
float: left;
}
.nav {
padding: 10px 0 25px 0;
background-color: #333;
height: 35px;
margin: 0;
border: solid;
margin-bottom: 5px;
margin-top: 5px;
text-align: center;
width: 800px;
}
nav ul {
list-style-type: none;
margin: 0;
padding: 0;
text-align: center;
}
nav li {
display: inline;
}
.btnInicio {
background-image: url("Imagenes/btnInicio.png");
background-repeat: no-repeat;
float: left;
height: 56px;
width: 138px;
}
.btnInicio:hover {
background-image: url("Imagenes/btnInicio_Hover.png");
}
.btnHistoria {
background-image: url("Imagenes/btnHistoria.png");
background-repeat: no-repeat;
float: left;
height: 56px;
width: 138px;
}
.btnHistoria:hover {
background-image: url("Imagenes/btnHistoria_Hover.png");
}
.btnLogros {
background-image: url("Imagenes/btnLogros.png");
background-repeat: no-repeat;
float: left;
height: 56px;
width: 138px;
}
.btnLogros:hover {
background-image: url("Imagenes/btnLogros_Hover.png");
}
.btnAct {
background-image: url("Imagenes/btnAct.png");
background-repeat: no-repeat;
float: left;
height: 56px;
width: 138px;
}
.btnAct:hover {
background-image: url("Imagenes/btnAct_Hover.png");
}
.btnCon {
background-image: url("Imagenes/btnCon.png");
background-repeat: no-repeat;
float: left;
height: 56px;
width: 138px;
}
.btnCon:hover {
background-image: url("Imagenes/btnCon_Hover.png");
}
section.main section.container {
padding: 10px 360px 20px 30px;
position: relative;
overflow: hidden;
border: solid;
}
section.content {
float: left;
width: 100%;
background-color: #FFFF00;
border: solid;
}
section.sidebar {
float: right;
margin-right: -330px;
width: 300px;
background-color: #fff;
border: solid;
}
section.content:after,
section.sidebar:after {
display: block;
position: absolute;
height: 100%;
background-color: #fff;
}
section.content:after {
left: 30px;
right: 360px;
}
section.sidebar:after {
right: 30px;
width: 300px;
}
section.left,
aside.right {
padding: 20px;
}
footer {
background-color: #428BCA;
float: right;
height: 35px;
width: 99.85%;
text-align: center;
font-size: 30px;
border: solid;
margin-top: 5px;
}
@media all and (max-width: 840px) {
section.main section.container {
padding: 10px 30px;
overflow: visible;
}
section.content {
float: none;
margin-bottom: 30px;
}
section.sidebar {
float: none;
margin-right: 0;
width: 100%;
}
section.content:after,
section.sidebar:after {
display: none
}
}<nav>
<div class="nave">
<ul>
<li class="btnInicio"></li>
<li class="btnHistoria"></li>
<li class="btnLogros"></li>
<li class="btnAct"></li>
<li class="btnCon"></li>
</ul>
</div>
</nav>
<section class="main">
<section class="container">
<section class="content">
<section class="left">
</section>
</section>
<section class="sidebar">
<aside class="right">
<h2>This is a sidebar</h2>
Sign up to the newsletter!
</aside>
</section>
</section>
</section>
<footer>
</footer>
</body>
</html>代码我已经看到了处理这件事都没有使用背景图片的按钮。如果可能，我想继续使用它们。
我不知道你的HTML结构的其余部分，所以我最好关可以尝试'保证金：0汽车;''在nav' – Franco
它什么都不做。我可以发布我的整个结构。 –
请做。所以我可以看看它。你'css'也需要一些改动，但是当你的代码发布时我可以更好地看到它。 – Franco