【发布时间】：2017-04-01 10:19:35
【问题描述】：
我正在尝试创建一个标题，该标题在中心有一个徽标，两侧有两个按钮。我希望按钮和徽标在水平方向上均匀分布，然后在垂直空间的中心。 下面的图片是我到目前为止所拥有的，粉红色的只是为了让我可以看到标题在做什么。
这是我的 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>
这是我的 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;
}
【问题讨论】：
-
@Vel 好吧，我没有把它包括在内，因为你没有必要看到
标签： html css position css-position center