Question

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

这是我的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;
}

Answer 1

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

Answer 2

要轻松完成此操作，您可以让#logo拥有display: inline-block;，然后将text-align: center;放在header上以使徽标居中（您可能需要添加{{1}在你的浮动导航容器中将文本恢复正常）。

请参阅演示here（修复....链接错误之前）

如果您想使用flexbox，只需将text-align: left;和display: flex;添加到justify-content: space-between;样式即可。请注意，Flexbox可能不支持旧版IE和某些iOS版本

请参阅演示here

定位按钮和徽标均匀分隔

2 个答案: