如何将容器的原点更改为其中的元素

Question

所以，我想要做的是以 Instagram 徽标 是 nav 是原点的方式将 nav 元素居中，这将使 nav 元素向左移动一点，使 Instagram 徽标 出现在他的中心，其他元素相对于它。

nav {
  background-color: rgba(165, 42, 42, 0.521);
  display: flex;
  align-items: center;
  justify-content: center;
}

a {
  background-color: rgba(238, 223, 20, 0.596);
  margin: 10px;
}

<nav>
  <a href="">home</a>
  <a href="">contact</a>
  <a href="#">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16.28 16.28" height="50" width="50">
          <path d="M8.14 3.96a4.17 4.17 0 0 0-4.17 4.17 4.16 4.16 0 0 0 4.17 4.17 4.17 4.17 0 0 0 4.17-4.17A4.17 4.17 0 0 0 8.2 3.96zm0 6.88a2.71 2.71 0 1 1 0-5.42 2.71 2.71 0 0 1 2.71 2.71 2.72 2.72 0 0 1-2.71 2.72zm5.32-7a1 1 0 0 1-1.707.707 1 1 0 0 1 .707-1.707 1 1 0 0 1 1 1zm2.76 1a4.83 4.83 0 0 0-1.32-3.4A4.84 4.84 0 0 0 11.49.12a107.23 107.23 0 0 0-6.71 0 4.87 4.87 0 0 0-3.41 1.31A4.86 4.86 0 0 0 .05 4.84a107.55 107.55 0 0 0 0 6.72 4.86 4.86 0 0 0 1.32 3.41 4.79 4.79 0 0 0 3.41 1.23c1.34.08 5.37.08 6.71 0a4.79 4.79 0 0 0 3.41-1.3 4.86 4.86 0 0 0 1.3-3.41c.08-1.34.08-5.37 0-6.71zM14.48 13a2.76 2.76 0 0 1-1.54 1.55c-1.07.42-3.62.32-4.8.32s-3.73.1-4.8-.32A2.75 2.75 0 0 1 1.79 13c-.43-1.07-.33-3.62-.33-4.8s-.09-3.73.33-4.8a2.73 2.73 0 0 1 1.55-1.54c1.07-.43 3.61-.33 4.8-.33s3.73-.1 4.8.32a2.75 2.75 0 0 1 1.55 1.55c.42 1.07.32 3.62.32 4.8s.1 3.73-.33 4.8z"/>
        </svg>
  </a>
  <a href="">about</a>
</nav>

Answer 1

我会为此使用网格：

nav {
  background-color: rgb(165 42 42 / 0.521);
  display: grid;
  grid-template-columns: 1fr 1fr min-content 2fr;
  /*
  I want four columns, with the third taking up the minimum space needed to fit its content.
  The remaining space is divided into 4 portions.
  Have two columns on the left taking up one portion each
  Have one column on the right taking up two portions
  */
}

a {
  display: grid;
  place-content: center;
  margin: 10px;
  background-color: rgb(238 223 20 / 0.596);
}

<nav>
  <a href="">home</a>
  <a href="">contact</a>
  <a href="#">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16.28 16.28" height="50" width="50">
          <path d="M8.14 3.96a4.17 4.17 0 0 0-4.17 4.17 4.16 4.16 0 0 0 4.17 4.17 4.17 4.17 0 0 0 4.17-4.17A4.17 4.17 0 0 0 8.2 3.96zm0 6.88a2.71 2.71 0 1 1 0-5.42 2.71 2.71 0 0 1 2.71 2.71 2.72 2.72 0 0 1-2.71 2.72zm5.32-7a1 1 0 0 1-1.707.707 1 1 0 0 1 .707-1.707 1 1 0 0 1 1 1zm2.76 1a4.83 4.83 0 0 0-1.32-3.4A4.84 4.84 0 0 0 11.49.12a107.23 107.23 0 0 0-6.71 0 4.87 4.87 0 0 0-3.41 1.31A4.86 4.86 0 0 0 .05 4.84a107.55 107.55 0 0 0 0 6.72 4.86 4.86 0 0 0 1.32 3.41 4.79 4.79 0 0 0 3.41 1.23c1.34.08 5.37.08 6.71 0a4.79 4.79 0 0 0 3.41-1.3 4.86 4.86 0 0 0 1.3-3.41c.08-1.34.08-5.37 0-6.71zM14.48 13a2.76 2.76 0 0 1-1.54 1.55c-1.07.42-3.62.32-4.8.32s-3.73.1-4.8-.32A2.75 2.75 0 0 1 1.79 13c-.43-1.07-.33-3.62-.33-4.8s-.09-3.73.33-4.8a2.73 2.73 0 0 1 1.55-1.54c1.07-.43 3.61-.33 4.8-.33s3.73-.1 4.8.32a2.75 2.75 0 0 1 1.55 1.55c.42 1.07.32 3.62.32 4.8s.1 3.73-.33 4.8z"/>
        </svg>
  </a>
  <a href="">about</a>
</nav>

如何将容器的原点更改为其中的元素

How to Change The Origin Point of The Container to an Element Inside It

html

css

web

responsive-design

center