如何使我的导航栏在两个不均匀的元素之间居中？

Question

我已经弄乱了我的代码大约两天了，我所做的一切都不起作用。我希望导航栏在两个元素之间居中 (<img>, <form>)。它现在大致居中，但是当您重新调整窗口大小时，它会在 1600 像素左右出现混乱。它只需要达到 1500 像素，因为在那之后我将进入不同的导航栏位置和样式。

Codepen：http://codepen.io/anon/pen/KpECd

HTML：

<header>
        <img src="../Images/Logo.svg" class="logo">   
        <nav>
            <a href="#" class="one">SHARING</a>
            <a href="#" class="two">HOSTING</a>
            <a href="#" class="three">PRICING</a>
            <a href="#" class="four">ACCOUNT</a>
        </nav>
        <form method="post" action="index.php">
            <button value="SIGNUP" name="signup">SIGNUP</button>            
            <button value="LOGIN" name="login">LOGIN</button>
        </form>    
    </header>

CSS：

@charset "utf-8";

header {
    background-color:#464646;
    height:100px;
    width:100%;
}

header .logo {
    max-height:44px;
    max-width:535px;
    margin:28px 28px 28px 28px;
}

header form {
    display:inline;
    float:right;
    margin:28px 28px 28px 28px;
}

header form button {
    height:44px;
    width:125px;
    border:2px solid white;
    border-radius:10px;
    -moz-border-radius:10px;
    -webkit-border-radius:10px;
    background-color:transparent;
    font-family:"Lato Black";
    color:white;
    font-size:22px;
}

header form button:hover {
    background-color:rgba(255, 255, 255, .2);
    cursor:pointer;
}

header form button:active {
    background-color:rgba(255, 255, 255, .8);
}

nav {
    width:47.5%;
    display:inline;;
    position:absolute;
    text-align:center;
}

nav a {
    display:inline-block;
    height:100px;
    width:20%;
    color:white;
    font-family:"Lato Black";
    text-decoration:none;
    font-size:16px;
    line-height:100px;
}

nav a:hover {
    background-color:#00a651;
    cursor:pointer;
}

Answer 1

如果您有 3 个元素，并且想要一个在左侧，一个在右侧，最后一个在其他元素之间，您可以使用这样的表格：

<table cellpadding="0" cellspacing="0" border="0" style="width:100%;">
 <tr>
  <td align="left" valign="middle">
      <img src="myimage.jpg" />
  </td>
  <td align="center" valign="middle" style="width:100%;">
  <!-- width 100% will take all the spaces between the other cells -->
    <a href="#" class="one">one</a>
    <a href="#" class="two">two</a>
    <a href="#" class="three">three</a>
    <a href="#" class="four">four</a>
  </td>
  <td align="right" valign="middle">
    <form method="post" action="index.php" style="width:260px;">
        <button value="SIGNUP" name="signup" style="width:120px;">SIGNUP</button>
        <button value="LOGIN" name="login" style="width:120px;">LOGIN</button>
    </form>
  </td>
 </tr>
</table>

DEMO

如果你像很多人一样不喜欢表格，你可以使用带有浮点数和 jQuery 的 div：

winResize = function(){

    var HeaderWidth = $("#header").outerWidth();
    var div1Width = $("#div1").outerWidth();
    var div3Width = $("#div3").outerWidth();

    var div2Width = HeaderWidth - div1Width - div3Width;
    $("#div2").css("width", div2Width+"px");
}

winResize();

$(window).resize(function(){

    winResize();
});

JQUERY DEMO