定位按钮和徽标可以相同地间隔开

I am trying to create a header that has a logo in the centre and two buttons either side of it. I want the buttons and the logo to be evenly spaced horizontally and then in the centre of vertical space. The image below is what I have so far, the pink is just so I can see what the header is doing.

我正在尝试创建一个标题，中间有一个徽标，两侧有两个按钮。我希望按钮和徽标水平均匀分布，然后在垂直空间的中心。下面的图片是我到目前为止，粉红色就是这样，我可以看到标题正在做什么。

This is my HTML:

这是我的HTML：

<body>
    <div id="container">
        <header>
            <div id="nav_left">
                <button class="nav_button">About Me</button>
                <button class="nav_button">Case Studies</button>
            </div>
            <div id="logo">
                <?xml version="1.0" encoding="UTF-8" standalone="no" ?>
                <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
                <svg width="100%" height="100%" viewBox="0 0 513 700" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:1.41421;">
                    <g transform="matrix(1.16129,0,0,1.16129,-210.521,-117.321)">
                        <path d="M381.924,101.027L301.667,101.027C301.667,101.027 221.281,100.584 221.411,181.284C221.54,261.984 221.411,301.669 221.411,301.669C221.411,301.669 221.825,381.773 301.667,381.926C381.51,382.078 261.539,381.926 261.539,381.926C261.539,381.926 181.26,381.643 181.282,462.182C181.304,542.722 181.282,622.696 181.282,622.696C181.282,622.696 180.9,702.907 261.539,702.952C342.178,702.998 381.924,702.952 381.924,702.952L381.924,622.696L301.667,622.696C301.667,622.696 261.724,622.03 261.539,582.567C261.354,543.104 261.539,502.311 261.539,502.311C261.539,502.311 261.628,462.192 301.667,462.182C341.707,462.173 381.924,462.182 381.924,462.182L381.924,301.669L341.796,301.669C341.796,301.669 301.478,300.882 301.667,261.541C301.857,222.2 301.667,221.412 301.667,221.412C301.667,221.412 302.065,181.256 341.796,181.284C381.526,181.312 381.924,181.284 381.924,181.284L381.924,101.027L381.924,101.027Z" style="fill:rgb(60,122,190);" />
                        <path d="M422.052,101.027L502.309,101.027C502.309,101.027 582.289,101.974 582.566,181.284C582.842,260.595 582.566,301.669 582.566,301.669C582.566,301.669 581.877,381.579 502.309,381.926C422.741,382.273 542.437,381.926 542.437,381.926C542.437,381.926 622.641,383.525 622.694,462.182C622.747,540.84 622.694,702.952 622.694,702.952L542.437,702.952L542.437,502.311C542.437,502.311 541.684,461.99 502.309,462.182C462.934,462.375 422.052,462.182 422.052,462.182L422.052,301.669L462.181,301.669C462.181,301.669 501.568,300.956 502.309,261.541C503.05,222.126 502.309,221.412 502.309,221.412C502.309,221.412 501.63,181.454 462.181,181.284C422.731,181.114 422.052,181.284 422.052,181.284L422.052,101.027L422.052,101.027Z" style="fill:rgb(60,122,190);" />
                    </g>
                </svg>
            </div>
            <div id="nav_right">
                <button class="nav_button">Contact Me</button>
                <button class="nav_button">Other</button>
            </div>
        </header>
    </div>
</body>

This is my CSS:

这是我的CSS：

body {
    margin: 0;
}

#container {
    width: 100%;
    margin: 0;
}

header {
    width: 100%;
    background-color: pink;
}

#logo {
    height: 250px;
    width: 250px;
    margin: auto;
    border: 0px;
    padding: 0px;
}

#nav_left {
    float: left;
}

#nav_right {
    float: right;
}

.nav_button {
    width: 150px;
    float: left;
    margin-left: 5%;
    margin-top: 25%;
    margin-bottom: 25%;
    position: inherit;
}

2 个解决方案

#1

If I get it correctly (you need 5 evenly wide collmns) you can use either bootstrap or the Flexbox. Make a row direction and grow of 1 so they are evenly wide. Then place your elements into each of it and style it so they appear in the center of the column.

如果我正确地得到它（你需要5个均匀宽的collmns），你可以使用bootstrap或Flexbox。制作行方向并增长1，使它们均匀宽。然后将元素放入每个元素中并对其进行样式设置，使它们显示在列的中心。

#2

To do this easily you could make your #logo have display: inline-block;, then put text-align: center; on your header to center the logo (you might want to add text-align: left; in your floating nav containers to set their text back to normal).

要轻松完成此操作，您可以使#logo显示：inline-block ;,然后将text-align：center;在标题上以徽标为中心（您可能希望在浮动导航容器中添加text-align：left;以将其文本设置为正常）。

See demo here (fixed.... link was wrong before)

看这里的演示（修复....链接错误之前）

And if you wanted to use flexbox, you could simply add display: flex; and justify-content: space-between; to your header styles. Just note with flexbox that it might not be supported on older IE's and on some iOS versions

如果你想使用flexbox，你可以简单地添加display：flex;并证明 - 内容：间隔;到你的标题样式。请注意，Flexbox可能不支持旧版IE和某些iOS版本

See demo here

在这里看演示

#1

#2