Trying to center my menu - css

Question

I can't seem to understand how I should center this menu among the logo and the login/register
http://jsfiddle.net/hnnsr97x/2/
HTML
<header id="header">
<div id="LogReg">
<h2>Login | Register</h2>
</div>
<div id="logo">
<a class="logo" href="index.html"><img alt="Logo" title="logo" src="Logo/logo.png" ></a>
</div>
<nav id="menu">
<ul class="main_menu">
<li>MENU1</li>
<li>MENU2</li>
<li>MENU3</li>
</ul>
</nav>
</header>
CSS:
#header {
width:100%;
}
#logo, #menu {
float:left;
}
#menu {
}
#menu li {
display:inline-block;
}
#LogReg {
text-align:right;
}
The fiddle is quite empty because I cleared it from some things I tried
So I'm here to ask for someone to explain how I should get the menu in the center? I'm obviously missing something.

Answer 1

Try this: http://jsfiddle.net/hnnsr97x/6/
the calc(50% - 500px) is saying make the margin-left 50% minus the width of the image and half of the menu
#logo{
float:left;
}
#menu {
float:left;
margin-left: calc(50% - 500px);
}

Answer 2

Do you mean centering the menu like this?
<header id="header">
<div id="LogReg">
<h2>Login | Register</h2>
</div>
<div class="container">
<div id="logo">
<a class="logo" href="index.html">
<img alt="Logo" title="logo" src="Logo/logo.png" >
</a>
</div>
<nav id="menu">
<ul class="main_menu">
<li>MENU1</li>
<li>MENU2</li>
<li>MENU3</li>
</ul>
</nav>
</div>
</header>
CSS style:
#header {
width: 100%;
}
.container {
display: block;
margin: 0 auto;
width: 300px;
}
#logo {
float: left;
}
#menu {
float: right;
}
.main_menu {
margin: 0;
}
#menu li {
display: inline;
}
#LogReg {
text-align: right;
}
http://jsfiddle.net/jonathanzuniga/66xnov5z/embedded/result/

Answer 3

See working demo here Centered Menu
HTML:
<header id="header">
<div id="LogReg">
Login | Register
</div>
<div id="logo">
<a class="logo" href="index.html">LOGO</a>
</div>
<nav id="menu">
<ul>
<li>MENU1</li>
<li>MENU2</li>
<li>MENU3</li>
</ul>
</nav>
</header>
CSS:
#header {
width:100%;
display:block;
position:relative;
}
#LogReg {
float:right;
}
#logo{
position:absolute;
top: 0px;
left:10px;
}
#menu{
display:block;
width:100%;
text-align:center;
overflow:hidden;
}
#menu li {
display:inline;
}

Answer 4

https://jsfiddle.net/AkashPinnaka/0eq1f9az/embedded/result/ I am assuming you are intended to make them align in a line. And obviously you know the height of your logo. Let me assume your logo is of height 40px.
Modify your HTML code to the following code.
<header id="header">
<div id="logo">
<a class="logo" href="index.html"><img alt="Logo" title="logo" src="http://www.planwallpaper.com/static/images/9-credit-1.jpg"></a>
MENU1
MENU2
MENU3
</div>
<div id="LogReg">
Login | Register
</div>
</header>
And CSS code as following
#header {
width:100%;
height: 100px;
}
div#logo{
float: left;
}
div#logo a{
/* line-height: 100px; */
display: table-cell;
vertical-align: middle;
}
div#LogReg{
line-height: 40px;
float: right;
}
img{
height: 40px;
width: 80px; /* just assumed to be 80px wide. Width doesn't matter as long as it is not too long. */
}
I took img height as 40px in css as I assumed.
This aligns logo, navigation menu and login|register in the same line.
If you need Login|Register a bit higher than logo and menu, just reduce the line-height of div#LogoReg to less than 40px.
And if u want some margin on both left and right sides, wrap your whole header content in another div tag as shown below
<header id = "header">
<div id = "header_in">
</div>
</header>
and give the width of div#header_in as 80% or something you like. This gives the margin on both left and right sides of your header.
div#header_in{
width: 80%;
}
Let me know if you want anything different.