spacing /alignment社交图标

Question

这里有一个链接：https://korr.uk/

我搞不懂为什么头部不会居中。相反，它笨拙地一直向右走。

我在这里看到了同样的问题，但没有一个选项有帮助(宽度: 100%，边距:0自动)，我不知道还能做什么。徽标和社交媒体图标没有以任何方式集中在一起。

关于我已经得到的徽标，但社交媒体图标不是很好。我将它添加到CSS中，它帮助很大，我能够集中，但这不是最好的方式。图标的间距非常大，可以填满整个页面宽度。

​

a,
.social-menu li::before {
  margin-left: auto !important;
  margin-right: auto !important;
}

#masthead>center:nth-child(2) {
  width: 10% !important;
}

<div class="social-icons">
  <div style="display:flex;flex-wrap:wrap"><a href="https://www.facebook.com/korrarchitecture/" target="_blank" rel="noopener noreferrer" style="text-decoration:none;border:0;width:28px;height:28px;padding:2px;margin:5px;color:#9e9e9e;border-radius:50%;background-color:#fff;"><svg class="niftybutton-facebook" style="display:block;fill:currentColor" data-tag="fac" data-name="Facebook" viewBox="0 0 512 512" preserveAspectRatio="xMidYMid meet">
        <path d="M211.9 197.4h-36.7v59.9h36.7V433.1h70.5V256.5h49.2l5.2-59.1h-54.4c0 0 0-22.1 0-33.7 0-13.9 2.8-19.5 16.3-19.5 10.9 0 38.2 0 38.2 0V82.9c0 0-40.2 0-48.8 0 -52.5 0-76.1 23.1-76.1 67.3C211.9 188.8 211.9 197.4 211.9 197.4z"></path>
    </svg></a>
    <a href="https://www.instagram.com/korrarchitecture/" target="_blank" rel="noopener noreferrer" style="text-decoration:none;border:0;width:28px;height:28px;padding:2px;margin:5px;color:#9e9e9e;border-radius:50%;background-color:#fff;"><svg class="niftybutton-instagram" style="display:block;fill:currentColor" data-tag="ins" data-name="Instagram" viewBox="0 0 512 512" preserveAspectRatio="xMidYMid meet">
        <path d="M256 109.3c47.8 0 53.4 0.2 72.3 1 17.4 0.8 26.9 3.7 33.2 6.2 8.4 3.2 14.3 7.1 20.6 13.4 6.3 6.3 10.1 12.2 13.4 20.6 2.5 6.3 5.4 15.8 6.2 33.2 0.9 18.9 1 24.5 1 72.3s-0.2 53.4-1 72.3c-0.8 17.4-3.7 26.9-6.2 33.2 -3.2 8.4-7.1 14.3-13.4 20.6 -6.3 6.3-12.2 10.1-20.6 13.4 -6.3 2.5-15.8 5.4-33.2 6.2 -18.9 0.9-24.5 1-72.3 1s-53.4-0.2-72.3-1c-17.4-0.8-26.9-3.7-33.2-6.2 -8.4-3.2-14.3-7.1-20.6-13.4 -6.3-6.3-10.1-12.2-13.4-20.6 -2.5-6.3-5.4-15.8-6.2-33.2 -0.9-18.9-1-24.5-1-72.3s0.2-53.4 1-72.3c0.8-17.4 3.7-26.9 6.2-33.2 3.2-8.4 7.1-14.3 13.4-20.6 6.3-6.3 12.2-10.1 20.6-13.4 6.3-2.5 15.8-5.4 33.2-6.2C202.6 109.5 208.2 109.3 256 109.3M256 77.1c-48.6 0-54.7 0.2-73.8 1.1 -19 0.9-32.1 3.9-43.4 8.3 -11.8 4.6-21.7 10.7-31.7 20.6 -9.9 9.9-16.1 19.9-20.6 31.7 -4.4 11.4-7.4 24.4-8.3 43.4 -0.9 19.1-1.1 25.2-1.1 73.8 0 48.6 0.2 54.7 1.1 73.8 0.9 19 3.9 32.1 8.3 43.4 4.6 11.8 10.7 21.7 20.6 31.7 9.9 9.9 19.9 16.1 31.7 20.6 11.4 4.4 24.4 7.4 43.4 8.3 19.1 0.9 25.2 1.1 73.8 1.1s54.7-0.2 73.8-1.1c19-0.9 32.1-3.9 43.4-8.3 11.8-4.6 21.7-10.7 31.7-20.6 9.9-9.9 16.1-19.9 20.6-31.7 4.4-11.4 7.4-24.4 8.3-43.4 0.9-19.1 1.1-25.2 1.1-73.8s-0.2-54.7-1.1-73.8c-0.9-19-3.9-32.1-8.3-43.4 -4.6-11.8-10.7-21.7-20.6-31.7 -9.9-9.9-19.9-16.1-31.7-20.6 -11.4-4.4-24.4-7.4-43.4-8.3C310.7 77.3 304.6 77.1 256 77.1L256 77.1z"></path>
        <path d="M256 164.1c-50.7 0-91.9 41.1-91.9 91.9s41.1 91.9 91.9 91.9 91.9-41.1 91.9-91.9S306.7 164.1 256 164.1zM256 315.6c-32.9 0-59.6-26.7-59.6-59.6s26.7-59.6 59.6-59.6 59.6 26.7 59.6 59.6S288.9 315.6 256 315.6z"></path>
        <circle cx="351.5" cy="160.5" r="21.5"></circle>
    </svg></a>
    <a href="https://www.houzz.co.uk/pro/korr-architecture/korr-architecture" target="_blank" rel="noopener noreferrer" style="text-decoration:none;border:0;width:28px;height:28px;padding:2px;margin:5px;color:#9e9e9e;border-radius:50%;background-color:#fff;"><svg class="niftybutton-houzz" style="display:block;fill:currentColor" data-donate="true" data-tag="hoz" data-name="Houzz" viewBox="0 0 512 512" preserveAspectRatio="xMidYMid meet">
        <path d="M256.48 73.73v121.51L151.25 256V134.48l105.23-60.75M151.25 256v121.51l105.23-60.78L151.26 256h-.01m105.23 60.73v121.53l105.23-60.76V256l-105.23 60.73m0-121.47L361.72 256V134.48l-105.24 60.78"></path>
    </svg></a>
    <a href="https://uk.linkedin.com/in/jam-koramshai-a56a3365" target="_blank" rel="noopener noreferrer" style="text-decoration:none;border:0;width:28px;height:28px;padding:2px;margin:5px;color:#9e9e9e;border-radius:50%;background-color:#fff;"><svg class="niftybutton-linkedin" style="display:block;fill:currentColor" data-donate="true" data-tag="lin" data-name="LinkedIn" viewBox="0 0 512 512" preserveAspectRatio="xMidYMid meet">
        <path d="M186.4 142.4c0 19-15.3 34.5-34.2 34.5 -18.9 0-34.2-15.4-34.2-34.5 0-19 15.3-34.5 34.2-34.5C171.1 107.9 186.4 123.4 186.4 142.4zM181.4 201.3h-57.8V388.1h57.8V201.3zM273.8 201.3h-55.4V388.1h55.4c0 0 0-69.3 0-98 0-26.3 12.1-41.9 35.2-41.9 21.3 0 31.5 15 31.5 41.9 0 26.9 0 98 0 98h57.5c0 0 0-68.2 0-118.3 0-50-28.3-74.2-68-74.2 -39.6 0-56.3 30.9-56.3 30.9v-25.2H273.8z"></path>
    </svg></a>
  </div><br/>
</div>

​

Answer 1

这是因为您的flex div有100%的宽度。我已经添加了这些样式width:300px;margin:0 auto。

​

a,
.social-menu li::before {
  margin-left: auto !important;
  margin-right: auto !important;
}

#masthead>center:nth-child(2) {
  width: 10% !important;
}

<div class="social-icons">
  <div style="display:flex;flex-wrap:wrap;width:300px;margin:0 auto"><a href="https://www.facebook.com/korrarchitecture/" target="_blank" rel="noopener noreferrer" style="text-decoration:none;border:0;width:28px;height:28px;padding:2px;margin:5px;color:#9e9e9e;border-radius:50%;background-color:#fff;"><svg class="niftybutton-facebook" style="display:block;fill:currentColor" data-tag="fac" data-name="Facebook" viewBox="0 0 512 512" preserveAspectRatio="xMidYMid meet">
        <path d="M211.9 197.4h-36.7v59.9h36.7V433.1h70.5V256.5h49.2l5.2-59.1h-54.4c0 0 0-22.1 0-33.7 0-13.9 2.8-19.5 16.3-19.5 10.9 0 38.2 0 38.2 0V82.9c0 0-40.2 0-48.8 0 -52.5 0-76.1 23.1-76.1 67.3C211.9 188.8 211.9 197.4 211.9 197.4z"></path>
    </svg></a>
    <a href="https://www.instagram.com/korrarchitecture/" target="_blank" rel="noopener noreferrer" style="text-decoration:none;border:0;width:28px;height:28px;padding:2px;margin:5px;color:#9e9e9e;border-radius:50%;background-color:#fff;"><svg class="niftybutton-instagram" style="display:block;fill:currentColor" data-tag="ins" data-name="Instagram" viewBox="0 0 512 512" preserveAspectRatio="xMidYMid meet">
        <path d="M256 109.3c47.8 0 53.4 0.2 72.3 1 17.4 0.8 26.9 3.7 33.2 6.2 8.4 3.2 14.3 7.1 20.6 13.4 6.3 6.3 10.1 12.2 13.4 20.6 2.5 6.3 5.4 15.8 6.2 33.2 0.9 18.9 1 24.5 1 72.3s-0.2 53.4-1 72.3c-0.8 17.4-3.7 26.9-6.2 33.2 -3.2 8.4-7.1 14.3-13.4 20.6 -6.3 6.3-12.2 10.1-20.6 13.4 -6.3 2.5-15.8 5.4-33.2 6.2 -18.9 0.9-24.5 1-72.3 1s-53.4-0.2-72.3-1c-17.4-0.8-26.9-3.7-33.2-6.2 -8.4-3.2-14.3-7.1-20.6-13.4 -6.3-6.3-10.1-12.2-13.4-20.6 -2.5-6.3-5.4-15.8-6.2-33.2 -0.9-18.9-1-24.5-1-72.3s0.2-53.4 1-72.3c0.8-17.4 3.7-26.9 6.2-33.2 3.2-8.4 7.1-14.3 13.4-20.6 6.3-6.3 12.2-10.1 20.6-13.4 6.3-2.5 15.8-5.4 33.2-6.2C202.6 109.5 208.2 109.3 256 109.3M256 77.1c-48.6 0-54.7 0.2-73.8 1.1 -19 0.9-32.1 3.9-43.4 8.3 -11.8 4.6-21.7 10.7-31.7 20.6 -9.9 9.9-16.1 19.9-20.6 31.7 -4.4 11.4-7.4 24.4-8.3 43.4 -0.9 19.1-1.1 25.2-1.1 73.8 0 48.6 0.2 54.7 1.1 73.8 0.9 19 3.9 32.1 8.3 43.4 4.6 11.8 10.7 21.7 20.6 31.7 9.9 9.9 19.9 16.1 31.7 20.6 11.4 4.4 24.4 7.4 43.4 8.3 19.1 0.9 25.2 1.1 73.8 1.1s54.7-0.2 73.8-1.1c19-0.9 32.1-3.9 43.4-8.3 11.8-4.6 21.7-10.7 31.7-20.6 9.9-9.9 16.1-19.9 20.6-31.7 4.4-11.4 7.4-24.4 8.3-43.4 0.9-19.1 1.1-25.2 1.1-73.8s-0.2-54.7-1.1-73.8c-0.9-19-3.9-32.1-8.3-43.4 -4.6-11.8-10.7-21.7-20.6-31.7 -9.9-9.9-19.9-16.1-31.7-20.6 -11.4-4.4-24.4-7.4-43.4-8.3C310.7 77.3 304.6 77.1 256 77.1L256 77.1z"></path>
        <path d="M256 164.1c-50.7 0-91.9 41.1-91.9 91.9s41.1 91.9 91.9 91.9 91.9-41.1 91.9-91.9S306.7 164.1 256 164.1zM256 315.6c-32.9 0-59.6-26.7-59.6-59.6s26.7-59.6 59.6-59.6 59.6 26.7 59.6 59.6S288.9 315.6 256 315.6z"></path>
        <circle cx="351.5" cy="160.5" r="21.5"></circle>
    </svg></a>
    <a href="https://www.houzz.co.uk/pro/korr-architecture/korr-architecture" target="_blank" rel="noopener noreferrer" style="text-decoration:none;border:0;width:28px;height:28px;padding:2px;margin:5px;color:#9e9e9e;border-radius:50%;background-color:#fff;"><svg class="niftybutton-houzz" style="display:block;fill:currentColor" data-donate="true" data-tag="hoz" data-name="Houzz" viewBox="0 0 512 512" preserveAspectRatio="xMidYMid meet">
        <path d="M256.48 73.73v121.51L151.25 256V134.48l105.23-60.75M151.25 256v121.51l105.23-60.78L151.26 256h-.01m105.23 60.73v121.53l105.23-60.76V256l-105.23 60.73m0-121.47L361.72 256V134.48l-105.24 60.78"></path>
    </svg></a>
    <a href="https://uk.linkedin.com/in/jam-koramshai-a56a3365" target="_blank" rel="noopener noreferrer" style="text-decoration:none;border:0;width:28px;height:28px;padding:2px;margin:5px;color:#9e9e9e;border-radius:50%;background-color:#fff;"><svg class="niftybutton-linkedin" style="display:block;fill:currentColor" data-donate="true" data-tag="lin" data-name="LinkedIn" viewBox="0 0 512 512" preserveAspectRatio="xMidYMid meet">
        <path d="M186.4 142.4c0 19-15.3 34.5-34.2 34.5 -18.9 0-34.2-15.4-34.2-34.5 0-19 15.3-34.5 34.2-34.5C171.1 107.9 186.4 123.4 186.4 142.4zM181.4 201.3h-57.8V388.1h57.8V201.3zM273.8 201.3h-55.4V388.1h55.4c0 0 0-69.3 0-98 0-26.3 12.1-41.9 35.2-41.9 21.3 0 31.5 15 31.5 41.9 0 26.9 0 98 0 98h57.5c0 0 0-68.2 0-118.3 0-50-28.3-74.2-68-74.2 -39.6 0-56.3 30.9-56.3 30.9v-25.2H273.8z"></path>
    </svg></a>
  </div><br/>
</div>

​