html - 内联SVG始终未对齐(y位置低于其父级)？

我有一个内联的svg[简单图标]被一个元素包围，不管我尝试了什么，svg都不会停留在其父级的范围内[稍高于其父级，如中所示，就像有一个“margin top:-5px”]。老实说，我已经遭受了这个问题的一个永恒，通常添加黑客CSS，以获得正确的定位通过边距/填充等，但真的希望知道真正的原因。
所以基本上，这是为什么-如何解决它？
我还在这里创建了一个小提琴：https://jsfiddle.net/hfzh43fg以防代码片段出现错误：
要查看问题的症结所在，请查看元素，而不是其父元素

元素-如您所见-它不包含？
[请注意：我希望标志完全集中在两个轴'。

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

最佳答案

使用vertical-align。vertical-align: middle的作用是
将element的中间与baseline加上
x-height的。
所以，给

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

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

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

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

关于html - 内联SVG始终未对齐(y位置低于其父级)？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/35147012/