Question

我一直在拼命想找到一种方法将我的logo 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

要解决此问题，您需要进行一些更改：

SVG有一个display:block会阻止某些移动，将其更改为inline-block，因此line-height之类的内容会影响它。
将line-height添加到与.nav-logo（3.7em）相同大小的height，以便元素以垂直居中显示。
通过添加vertical-align: middle
删除width:100%和height:100%，因为您没有指定SVG的大小，它会自动扩展到其容器的大小。

通过所有这些更改，图像已经居中......但它看起来并不像。为什么？因为剩下一个更改：viewBox。现在SVG是两个字母，下面有一个很大的空白区域。发生这种情况是因为viewBox（绘制图像的画布）是100x100，但是＆＃34;最低＆＃34;图像的点位于53.34，使其下方的所有空间都空白
所以最后一个更改：修改viewBox，使其将图像限制为内部内容：宽度正常（100），但高度应为53.34。固定最后一部分后，徽标垂直居中：

＆＃13;

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

＆＃13;

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

＆＃13;

如果您想将更改限制在最低限度，您只需要一个简单的步骤：翻译g标记，使其位于svg内，这样就不会留下所有的空白区域在底部，你把它放在字母的上方和下方。

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

＆＃13;

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

＆＃13;

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

＆＃13;

SVG不会垂直居中

1 个答案: