如何使用背景图像居中NAV栏？

时间：2016-10-07 21:50:52

标签： html css

我有一个导航栏，按钮作为背景图像，当我将鼠标悬停在其上时会发生变化。但是，我似乎无法将按钮置于中心位置。

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>

代码我已经看到处理这个问题都没有使用背景图像作为按钮。如果可能的话，我想继续使用它们。

2 个答案:

答案 0 :(得分：0)

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;
  background-size: cover;
  background-position: center;
}
.btnInicio {
  background-image: url("http://www.aspca.org/sites/default/files/cat-care_cat-nutrition-tips_overweight_body4_left.jpg");
  background-repeat: no-repeat;
  float: left;
  height: 56px;
  width: 138px;
}
.btnInicio:hover {
  background-image: url("https://i.ytimg.com/vi/tntOCGkgt98/maxresdefault.jpg");
}
.btnHistoria {
  background-image: url("http://www.aspca.org/sites/default/files/cat-care_cat-nutrition-tips_overweight_body4_left.jpg");
  background-repeat: no-repeat;
  float: left;
  height: 56px;
  width: 138px;
}
.btnHistoria:hover {
  background-image: url("https://i.ytimg.com/vi/tntOCGkgt98/maxresdefault.jpg");
}
.btnLogros {
  background-image: url("http://www.aspca.org/sites/default/files/cat-care_cat-nutrition-tips_overweight_body4_left.jpg");
  background-repeat: no-repeat;
  float: left;
  height: 56px;
  width: 138px;
}
.btnLogros:hover {
  background-image: url("https://i.ytimg.com/vi/tntOCGkgt98/maxresdefault.jpg");
}
.btnAct {
  background-image: url("http://www.aspca.org/sites/default/files/cat-care_cat-nutrition-tips_overweight_body4_left.jpg");
  background-repeat: no-repeat;
  float: left;
  height: 56px;
  width: 138px;
}
.btnAct:hover {
  background-image: url("https://i.ytimg.com/vi/tntOCGkgt98/maxresdefault.jpg");
}
.btnCon {
  background-image: url("http://www.aspca.org/sites/default/files/cat-care_cat-nutrition-tips_overweight_body4_left.jpg");
  background-repeat: no-repeat;
  float: left;
  height: 56px;
  width: 138px;
}
.btnCon:hover {
  background-image: url("https://i.ytimg.com/vi/tntOCGkgt98/maxresdefault.jpg");
}
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>

我已在您的CSS中将background-size: cover;和background-position: center;添加到nav li（并且还会放一些猫来显示真实图像）。

顺便说一下，你的布局在移动尺寸上非常混乱。

我会创建一个通用的.button或.nav-button类来添加这些背景属性，而不是添加它们nav li。然后你可以将这些重复的样式（浮点数，宽度，高度）移动到这个新类中。

答案 1 :(得分：0)

LiveFiddle最好使用displa：inline-flex on nav li，你也可以删除那些浮动：左边的按钮背景部分和.nav。 aslo从.nave中删除填充。祝好运 [N.B：我不使用图像这里只是背景颜色，例如你可以用你的按钮网址替换它]。 

 nav {
   padding: 10px 0 25px 0;
   background-color: blue;
 }
 
 .nave {
   width: 100%;
   max-width: 1200px;
   margin: 0 auto;
   
 }
 
 .nav {
   padding: 10px 0 25px 0;
   background-color: #333;
   height: 35px;
   margin: 0;
   border: solid;
   margin-top: 5px;
   width:800px;
 }
 
 nav ul {
   list-style-type: none;
   margin: 0;
   padding: 0;
   text-align: center;
 }
 
 nav li {
   display: inline-flex;
 }
 
 .btnInicio {
   background: #fff;
   background-repeat: no-repeat;
   height: 56px;
   width: 138px;
 }
 
 .btnInicio:hover {
   background: #bbb;
 }
 
 .btnHistoria {
   background: red;
   background-repeat: no-repeat;
   height: 56px;
   width: 138px;
 }
 
 .btnHistoria:hover {
   background: #000;
 }
 
 .btnLogros {
   background: yellow;
   background-repeat: no-repeat;
   height: 56px;
   width: 138px;
 }
 
 .btnLogros:hover {
   background: #fff;
 }
 
 .btnAct {
   background: green;
   background-repeat: no-repeat;
   height: 56px;
   width: 138px;
 }
 
 .btnAct:hover {
   background: lightblue;
 }
 
 .btnCon {
   background: #000;
   background-repeat: no-repeat;
   height: 56px;
   width: 138px;
 }
 
 .btnCon:hover {
   background: #bbb;
 }
 
 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>

相关问题
最新问题