Navbar with logo in middle will not center
Question
I'm trying to make my logo on my navbar be centered and the other items of the navbar be around it. Currently the logo is in the center of the text items where it should be but I cannot get the whole logo with the text around it to center.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Charity</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id='nav'>
<ul class='navigation'>
<li><a href='#'>Home</a></li>
<li><a href='#'>Events</a></li>
</ul>
<img src="images/main-logo.png" id="logo" />
<ul class="navigation">
<li><a href='#'>Full list of Charities</a></li>
</ul>
</div><!-- end of nav -->
</body>
</html>
The css
html, body {
padding: 0;
margin: 0;
}
#logo {
float: left;
margin:auto;
}
#nav {
margin:auto;
background-color: #CCC;
height: 66px;
box-shadow: 0px 1px 10px #5E5E5E;
}
.navigation {
list-style-type: none;
float: left;
}
li {
display: inline;
padding: 15px;
margin:auto;
}
#nav a {
font-size: 1.6em;
text-transform: uppercase;
text-shadow: 0 0 0.3em #464646;
font-weight: bold;
font-family: century gothic;
text-decoration: none;
color: #262626;
opacity: 0.26;
}
#nav a:hover {
opacity: 0.36;
}
3 answers
solution1
1 2014-02-21 20:40:49
If the point is to center the image between the li items, just make it an item also:
<div id='nav'>
<ul class='navigation'>
<li><a href='#'>Home</a></li>
<li><a href='#'>Events</a></li>
<li><img src="images/main-logo.png" id="logo" /></li>
<li><a href='#'>Full list of Charities</a></li>
</ul>
</div>
!!! Don't forget to remove the #logo style !!!
Check it out: http://jsfiddle.net/QUkPj/
solution2
0 2014-02-21 20:42:33
In order for margins to work on an image, you need to declare display:block on them. img tags by default are displayed as inline elements (and margin will not do anything to inline elements).
See here: http://jsfiddle.net/9xtea/1/
solution3
0 2014-02-21 20:50:48
because you want to center the logo and have the rest of the elements aligned to left and right of that, you'll need to use position absolute:
#logo { position: absolute; top: 0; left: 50%; margin-left: -??px; } /* negative margin half the width of the logo */
.navigation-left { list-style-type: none; position: absolute; right: 50%; margin-right: ??px } /* positive margin half the width of the logo */
.navigation-right { list-style-type: none; position: absolute; left: 50%; margin-left: ??px } /* positive margin half the width of the logo */
this centers the logo in the nav bar and then puts the left and right menu options around it regardless of their size
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.