html - SVG 不会垂直居中

Question

<分区>

Answer 1

要解决此问题，您需要进行几项更改:

1. SVG 有一个 display:block 会阻止一些移动，把它改成 inline-block 这样像 line-height 会影响它。

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

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

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

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

5. 所以最后一个更改:修改 viewBox 以将图像限制为内部内容:宽度没问题 (100)，但高度应为 53.34。修复最后一部分后， Logo 垂直居中:

.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>