I'm having trouble centering the contents of my Nav Bar, and for some reason, everything seems to be left-aligned instead of centered.
I haven't used float: left anywhere, so I'm not sure why it's not working as expected.
The goal is to center both the image and navigation links in the bar.
Here is the code snippet:
<!DOCTYPE html>
<html>
<head>
<title>Soni's Computer Repair</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/styles.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="js/bootstrap.js"></script>
</head>
<body>
<div class="navbar navbar-inverse navbar-static-top">
<div class="container">
<a class="navbar-brand"><img src="Final.png"/></a>
<div class="navbar-header">
<button class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li><a href="#">Home</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</div>
</div>
</div>
<footer class="footer">
<div class="container">
<h6 class="text-center">Copyright © Soni Computer Repairs</h6>
<p class="text-center">www.SoniRepairs.com</p>
</div>
</footer>
</body>
</html>
This is the CSS code that would help align the elements properly:
.nav, .navbar-nav {
text-align: center;
}
.container img {
height: 100%;
display: block;
margin-right: auto;
margin-left: auto;
}
.footer {
position: absolute;
bottom: 0;
width: 100%;
height: 60px;
background-color: #f5f5f5;
}
@media screen and (max-width: 500px) {
.navbar-nav, .container img{
margin-left: auto;
margin-right: auto;
display: table;
table-layout: fixed;
float: none;
}
.navbar-brand {
position: absolute;
width: 100%;
left: 0;
text-align: center;
margin: auto;
}
}