导航栏Bootstrap的居中内容

时间:2016-08-30 17:23:56

标签: html css twitter-bootstrap

我正在开发静态网站,我想在导航菜单中间居中导航栏的内容。我正在尝试很多方法,但有些不对劲。我认为<img>可能存在问题。谢谢大家!

HTML code:

       <nav class="navbar navbar-custom" role="navigation">

       <div class="container-fluid header">        

       <ul class="nav navbar-nav">

           <li><a href="main.html">Main</a></li>

           <li><img class="navi_images" src="images/rose+garland.png"/></li>

           <li><a href="portfolio.html" >Portfolio</a></li>

           <li><img class="navi_images" src="images/rose+garland.png"/></li>

           <li><a href="#">Contacts</a></li>

           <li><img class="navi_images" src="images/rose+garland.png"/></li>

           <li><a href="#">Reviews</a></li>

       </ul>    

       </div>       

       </nav>




<nav class="navbar navbar-custom" role="navigation">

      <div class="container-fluid">

      <ul class="nav navbar-nav">

      <li><img src="images/Originals/example.png" class="footer_images"></li>

      <li><a href="#" data-toggle="tooltip" data-placement="left" title="instagram"><img src="images/insta.png" width="30px" height="30px" class="footer_logos"></a></li>

      <li><a href="https://vk.com/pricheskiotkylikludmilu" data-toggle="tooltip" data-placement="right" title="vkontakte"><img src="images/vk.png" width="30px" height="30px" class="footer_logos"></a></li>      

      <li><img src="images/Originals/example.png" class="footer_images"></li>

      </ul>

      </div>      

  </nav>

    <script src="bootstrap/jquery/jquery-2.2.2.min.js"></script>    
    <script src="bootstrap/js/bootstrap.js"></script>

  </body>

  </html>

CSS代码:

@media (min-width: 1024px) and (max-width: 2560px) {

.navbar-custom {
    background-color: bisque;
    margin-bottom: 0px;
    width: 100%;
}

.navbar-custom .navbar-nav li a {
    color: white;
    font-size: 45px;
    text-decoration: none;
    font-family: Allegretto Script One;
}

.navi_images {
    width: 120px;
    height: 60px;
}

@font-face {
    font-family: Allegretto Script One;
    src: url(fonts/AllegrettoScriptOne.ttf);
}

.footer_images {
    width: 280px;
    height: 60px;
}

}

0 个答案:

没有答案