SVG不会垂直居中[重复]

Question

我一直在拼命地试图找到某种方法将我的徽标 svg 置于 <div> 标记中。我已经搜索了所有堆栈溢出的感觉，但无济于事。我希望有人...任何人都可以帮助我解决这个问题！ 这是我的代码：

.site-nav__list {
        display: flex;
        list-style: none;
        align-items: center;
        padding: 0;
        margin: 0;
    }
    .nav-logo {
        cursor: pointer;
        text-align: center;
        width: 3.7em;
        height: 3.7em;
        border: 1px solid red;
    }
    .nav-logo svg {
        display: block;
        width: 100%;
        height: 100%;
        border: 1px solid green;
    }
    .nav-logo svg g {
        border: 1px solid blue;
    }

<ul class="site-nav__list">
          <li>
            <div class="nav-logo">
              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="none">
                <g data-name="Layer 1">
                  <path d="M26.25 0v27.1H0a26.67 26.67 0 0 0 53.34 0V0H26.25z" />
                  <path d="M100 8.25a26.67 26.67 0 1 0-.41 37.3L81.14 27.11z" />
                </g>
              </svg>
            </div>
          </li>
        </ul>

我找到的每个解决方案都没有奏效：/ 不，表格单元格和绝对定位在简单的 svg 上是愚蠢的。

Answer 1

您需要进行几项更改才能解决此问题：

1. SVG 有一个 display:block 会阻止一些移动，将其更改为 inline-block 这样line-height 之类的东西就会影响它。

2. 将line-height 添加到与height (3.7em) 大小相同的.nav-logo，这样元素将垂直居中显示。

3. 通过添加vertical-align: middle 使图像垂直对齐到行的中间。

4. 去掉width:100%和height:100%，因为你没有指定SVG的大小，它会自动扩展到容器的大小。

   通过所有这些更改，图像已经居中......但看起来不像。为什么？因为还有一个变化：viewBox。现在 SVG 是两个字母，下面有一个很大的空白区域。发生这种情况是因为在其中绘制图像的画布 viewBox 为 100x100，但图像的“最低”点为 53.34，其下方的所有空间都为空白。
   
   

5. 所以最后一个更改：修改 viewBox 以将图像限制在里面的内容：宽度是好的（100），但高度应该是 53.34。修复最后一部分后，徽标垂直居中：

.site-nav__list {
  display: flex;
  list-style: none;
  align-items: center;
  padding: 0;
  margin: 0;
}

.nav-logo {
  cursor: pointer;
  text-align: center;
  width: 3.7em;
  height: 3.7em;
  border: 1px solid red;
  line-height: 3.7em;
}

.nav-logo svg {
  display: inline-block;
  border: 1px solid green;
  vertical-align:middle;
}

.nav-logo svg g {
  border: 1px solid blue;
}

<ul class="site-nav__list">
  <li>
    <div class="nav-logo">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 53.34" preserveAspectRatio="none">
        <g data-name="Layer 1">
          <path d="M26.25 0v27.1H0a26.67 26.67 0 0 0 53.34 0V0H26.25z" />
          <path d="M100 8.25a26.67 26.67 0 1 0-.41 37.3L81.14 27.11z" />
        </g>
      </svg>
    </div>
  </li>
</ul>

---

如果您想将更改限制在最低限度，您只需要一个简单的步骤：将g 标记转换为在svg 内居中，因此您不必将所有空白都留在底部，而是把它放在字母的上面和下面。

您需要垂直翻译它（100 - 字母高度）/2，如前所述，高度为 53.34，因此翻译需要为 23.33：

.site-nav__list {
  display: flex;
  list-style: none;
  align-items: center;
  padding: 0;
  margin: 0;
}

.nav-logo {
  cursor: pointer;
  text-align: center;
  width: 3.7em;
  height: 3.7em;
  border: 1px solid red;
}

.nav-logo svg {
  display: block;
  width: 100%;
  height: 100%;
  border: 1px solid green;
}

.nav-logo svg g {
  border: 1px solid blue;
}

<ul class="site-nav__list">
  <li>
    <div class="nav-logo">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="none">
          <g data-name="Layer 1" transform="translate(0, 23.33)">
            <path d="M26.25 0v27.1H0a26.67 26.67 0 0 0 53.34 0V0H26.25z" />
            <path d="M100 8.25a26.67 26.67 0 1 0-.41 37.3L81.14 27.11z" />
          </g>
      </svg>
    </div>
  </li>
</ul>