Кнопки позиционирования и логотип должны быть разнесены одинаково

Я пытаюсь создать заголовок с логотипом в центре и двумя кнопками по обе стороны от него. Я хочу, чтобы кнопки и логотип были равномерно распределены по горизонтали, а затем в центре вертикального пространства. Изображение, приведенное ниже, является тем, что у меня до сих пор, розовый - это просто, чтобы я мог видеть, что делает заголовок. Кнопки позиционирования и логотип должны быть разнесены одинаково

Это мой 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; 
}

источник

2016-11-17 BenRichi_

@Vel хорошо я не включил, что, поскольку оно не нужно для вас, чтобы увидеть –

Если я правильно (вам нужно 5 равномерно широкие collmns), вы можете использовать либо начальную загрузку или Flexbox. Сделайте направление строк и увеличите на 1, чтобы они были равномерно широкими. Затем поместите свои элементы в каждую из них и настройте их так, чтобы они отображались в центре столбца.

источник

2016-11-17 18:24:39 TomasB

Я пытаюсь сделайте это без использования какого-либо внешнего кода, такого как bootstrap и т. д., так есть ли другой способ достичь той же цели? –

@BenRichi_ Flexbox интегрирован в CSS, поэтому он не является внешним кодом. – TomasB

О, ладно, я думаю, мне нужно немного почитать в flexbox, так как раньше я его не использовал. Спасибо –

Чтобы сделать это легко можно сделать свой #logo уже display: inline-block;, а затем положить text-align: center; на вашем header центрирование логотип (вы можете добавить text-align: left; в своих плавучих навигационных контейнеров, чтобы установить их текст обратно в нормальное русло).

См демо here (фиксированная .... связь была неправильно раньше)

И если вы хотите использовать Flexbox, вы можете просто добавить display: flex; и justify-content: space-between; своим header стилей. Сразу отметим, с Flexbox, что она может не поддерживаться на старых IE и на некоторых версиях IOS

Смотрите демо here

источник

2016-11-17 18:34:30 zgood

Хорошо, это имеет смысл, но тогда почему кнопки на вершине eachother все еще, я хочу, чтобы все было в горизонтальной линии ничего на вершине eachother. –

@BenRichi_ Кнопки уложены таким образом из-за всего поля, который вы создали на вашем '.nav_button'. Просто удалите его ... см. Демо здесь: https://jsfiddle.net/twyondfu/2/ – zgood

Кнопки позиционирования и логотип должны быть разнесены одинаково

ответ

Смежные вопросы