内联SVG始终未对齐（y位置低于其父级）？

Question

我有一个由元素包围的内联svg [简单图标]，无论我尝试过什么，svg都不会停留在其父级的范围内[略高于它，就像有一个' margin-top：-5px']。老实说，我已经忍受了这个问题一个永恒，并且通常添加hackish CSS以通过边距/填充等获得正确的定位，但真的希望知道真正的原因。 基本上，这就是为什么 - 以及如何修复它？

我还在这里创建了一个小提琴：https://jsfiddle.net/hfzh43fg，以防代码段行为异常：

要了解问题的关键，请查看＆lt; svg＆gt;元素而不是其父元素li>元素 - 你可以看到 - 它没有被包含？

[请注意：我希望徽标完全以两个轴为中心'。]

.icon,
.icon svg path {
  width: 20px;
  height: 20px;
  -webkit-transition: fill 0.15s ease-in-out 0s;
  -o-transition: fill 0.15s ease-in-out 0s;
  transition: fill 0.15s ease-in-out 0s;
  cursor: pointer;
  cursor: hand;
  fill: white;
}

#facebook:hover,
#facebook:hover svg path {
  fill: #3c5a99;
}

.socialLink-wrapper {
  background-color: black;
}

.socialLink {
  text-align: center;
  line-height: 2.5rem;
}

.socialLink li {
  display: inline;
  padding-right: 2rem;
}

.socialLink li a {
  text-decoration: none !important;
}

<div class="zone zone-footer-quad-first" shape-id="77">
  <svg style="display: none;" shape-id="80">
    <symbol viewBox="0 0 200 200" class="Facebook" id="facebook" shape-id="80">
      <path class="style8" d="M189 0H11C4.9 0 0 4.9 0 11V189c0 6.1 4.9 11 11 11h95.8v-77.5H80.8V92.4 h26.1V70.1c0-25.8 15.8-39.9 38.8-39.9c11 0 20.5 0.8 23.3 1.2v27l-16 0c-12.5 0-15 6-15 14.7v19.3h29.9l-3.9 30.2h-26V200h51 c6.1 0 11-4.9 11-11V11C200 4.9 195.1 0 189 0z"
      display="inline" id="_facebook" shape-id="80" />
    </symbol>
  </svg>
  <div class="socialLink-wrapper" shape-id="80">
    <ul class="socialLink" shape-id="80">
      <li class="facebook" shape-id="80">
        <svg class="icon" id="facebook" shape-id="80">
          <use xlink:href="#facebook" shape-id="80" />
        </svg>
      </li>
    </ul>
  </div>
</div>

非常感谢，PP。

Answer 1

  

使用vertical-align。 vertical-align: middle做的是它   将element的中间与baseline加上一半对齐   x-height的{​​{1}}。

所以，给

parent

检查https://jsfiddle.net/Jinukurian7/hfzh43fg/6/

＆＃13;

＆＃13;

.icon, .icon svg path{
  vertical-align: middle;
}

＆＃13;

.vcenter {
  display: table-cell;
  vertical-align: middle;
  height: 39px;
  float: none !important;
}

.icon,
.icon svg path {
  width: 20px;
  height: 20px;
  -webkit-transition: fill 0.15s ease-in-out 0s;
  -o-transition: fill 0.15s ease-in-out 0s;
  transition: fill 0.15s ease-in-out 0s;
  cursor: pointer;
  cursor: hand;
  fill: white;
  vertical-align: middle;
}

#facebook:hover,
#facebook:hover svg path {
  fill: #3c5a99;
}


/*NEW*/

.socialLink-wrapper {
  background-color: black;
}

.socialLink {
  text-align: center;
  line-height: 2.5rem;
}

.socialLink li {
  display: inline;
  padding-right: 2rem;
}

.socialLink li a {
  text-decoration: none !important;
}

＆＃13;

＆＃13;

＆＃13;

Answer 2

我认为您正在处理此图片中显示的问题：

在this fork of your fiddle中显示了解决此问题的相同行为：

首先，将viewBox属性添加到svg容器中，使其对其父级的大小负责：

<svg class="icon" id="facebook" shape-id="80" viewBox="0 0 200 200">
  <use xlink:href="#facebook" shape-id="80" />
</svg>

然后删除，其中应用了特定的width和height及其path并添加display内容。

.icon {
  display: inline-block;
  vertical-align: middle;
  ...
}

并从li

控制大小

.socialLink li {
  display: inline-block;
  width: 20px;
}