所以,我想做的是将nav元素居中,Instagram logonav是原点,这将使nav元素向左移动,使Instagram logo出现在中心,其他元素相对于它.

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>

推荐答案

我会使用网格来实现这一点:

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>

Html相关问答推荐

使用Scrapy Select 最后一个子文本

如何打破长URL,包含连字符在HTML与CSS

CSS位置:固定尊重母公司的保证金属性.""'为什么?

有没有一种方法可以用css和html在桌面上并排显示列,在移动设备上显示一个下方的列?

HTML5章节或文章

HTML+CSS+JS动态选中文本高亮 colored颜色 变化

将弹性容器设置为内容宽度

小虫?CSS Flexbox间隙应用于两个内联文本块之间,因为它们之间存在绝对定位的元素

如何在排序上重用参数?

<nav和button是姐妹元素.当添加了导航活动类时,我如何为按钮编写CSS?

在弹性框布局中的第n个元素后强制换行

高度:适合-内容不拉伸以适合内部长度

如何使用多边形制作如图所示的背景

将箭头图标添加到工具提示包装器时遇到问题

如何在 flex 项目中忽略子元素的宽度

CSS flex:0 0 auto创建了1像素的间隙

Css 左属性问题

如何使用 :before 在 CSS 中为列表增加计数器

CSS 斜角与 3 行对齐

调整窗口大小时试图阻止按钮移动