Html 定位按钮和徽标的间距应相等_Html_Css_Position_Css Position_Center

Html 定位按钮和徽标的间距应相等

html css

Html 定位按钮和徽标的间距应相等,html,css,position,css-position,center,Html,Css,Position,Css Position,Center,我试图创建一个标题，其中有一个标志，两边各有两个按钮。我希望按钮和徽标水平均匀分布，然后在垂直空间的中心。下面的图片是我到目前为止所看到的，粉红色只是为了让我能看到标题在做什么。这是我的HTML： <body> <div id="container"> <header> <div id="nav_left"> <button class="nav_butto

我试图创建一个标题，其中有一个标志，两边各有两个按钮。我希望按钮和徽标水平均匀分布，然后在垂直空间的中心。下面的图片是我到目前为止所看到的，粉红色只是为了让我能看到标题在做什么。

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

如果我没有弄错（你需要5个等宽的collmns），你可以使用引导或。沿方向排一行，并增长1，使其宽度均匀。然后将元素放入每个元素中，并设置样式，使其显示在列的中心。

如果我没有弄错（您需要5个等宽的列），您可以使用引导或。沿方向排一行，并增长1，使其宽度均匀。然后将您的元素放入每个元素中，并对其进行样式设置，使其显示在列的中心。

要轻松做到这一点，您可以使您的

#徽标具有显示：内联块，然后将文本对齐：居中标题上编码>以使徽标居中（您可能希望在浮动导航容器中添加文本对齐：左；
以将其文本设置回正常）
查看演示（修复了…以前链接错误）
如果您想使用flexbox，只需添加display:flex和对正内容：之间的空格到您的标题
样式。请注意，flexbox可能不支持旧版IE和某些iOS版本
请参见演示
要轻松完成此操作，您可以使您的#徽标
具有显示：内联块，然后将文本对齐：居中标题上编码>以使徽标居中（您可能希望在浮动导航容器中添加文本对齐：左；
以将其文本设置回正常）
查看演示（修复了…以前链接错误）
如果您想使用flexbox，只需添加display:flex和对正内容：之间的空格到您的标题
样式。请注意，flexbox可能不支持旧版IE和某些iOS版本
请看演示
@Vel我没有把它包括在内，因为您没有必要这样做see@Vel我没有包括这一点，因为您不必看到我正在尝试这样做，而无需使用任何外部代码，如引导等，那么，有没有其他方法可以达到同样的目标？@BenRichi_u2;flexbox集成在CSS中，因此它不是外部代码。哦，好吧，我想我需要对flexbox进行一些阅读，因为我以前没有使用过它。ThanksI我正在努力做到这一点，而不必使用任何外部代码，如bootstrap等，那么有没有其他方法来实现相同的目标？@BenRichi_uuFlexBox集成在CSS中，因此它不是外部代码。哦，好的，我想我需要阅读flexbox，因为我以前没有使用过它。谢谢，这是有道理的，但是为什么按钮仍然在上面，我希望所有的东西都在一条水平线上，没有任何东西在上面eachother@BenRichi_按钮是这样堆叠的，因为您在.nav_按钮
上设置了所有样式的边距。只需删除它。。。请看这里的演示：好的，这是有意义的，但为什么按钮仍然在彼此的顶部，我希望所有的东西都在一条水平线上，没有任何东西在上面eachother@BenRichi_按钮是这样堆叠的，因为您在.nav_按钮上设置了所有样式的边距。只需删除它。。。请参见此处的演示：
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;
}