我正在开发静态网站,我想在导航菜单中间居中导航栏的内容。我正在尝试很多方法,但有些不对劲。我认为<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;
}
}