0
使用SVG圖標創建此菜單後，我注意到菜單本身並不完全處於水平中心，而是略微向右移動一點。有誰知道爲什麼會發生這種情況，以及如何在精確的水平中心獲得菜單？SVG ul菜單不會定位到精確的水平中心
.soc {
display: block;
font-size: 0;
list-style: none;
margin: 0;
text-align: center;
}
.soc li {
display: inline-block;
margin: 1.2rem;
}
.soc a,
.soc svg {
display: block;
}
.soc a {
position: relative;
height: 50px;
height: 5.0rem;
width: 50px;
width: 5.0rem;
}
.soc svg {
height: 100%;
width: 100%;
}
.soc em {
font-size: 14px;
line-height: 1.5;
margin-top: -0.75em;
position: absolute;
text-align: center;
top: 50%;
right: 0;
bottom: 0;
left: 0;
}
.icon-facebook,
.icon-instagram,
.icon-linkedin,
.icon-snapchat,
.icon-twitter,
.icon-youtube {
color: #000;
fill: #000;
border-radius: 100%;
transition: background-color 0.5s, -webkit-transform 0.5s ease-out;
transition: background-color 0.5s, transform 0.5s ease-out;
transition: background-color 0.5s, transform 0.5s ease-out, -webkit-transform 0.5s ease-out;
-webkit-transition: background-color 0.5s, -webkit-transform 0.5s ease-out;
}
.icon-facebook:hover,
.icon-instagram:hover,
.icon-linkedin:hover,
.icon-snapchat:hover,
.icon-twitter:hover,
.icon-youtube:hover {
color: #fff;
fill: #fff;
-webkit-transform: scale(1.25);
transform: scale(1.25);
}
.icon-facebook:hover {
background: #3b5998;
}
.icon-instagram:hover {
background: #bc2a8d;
}
.icon-linkedin:hover {
background: #0077b5;
}
.icon-snapchat:hover {
background: #FFAB00;
}
.icon-twitter:hover {
background: #00aced;
}
.icon-youtube:hover {
background: #e52d27;
}<div id="sociallinks_menu">
<ul class="soc">
<li>
<a>
<svg viewBox="0 0 512 512">
<path d="M211.9 197.4h-36.7v59.9h36.7V433.1h70.5V256.5h49.2l5.2-59.1h-54.4c0 0 0-22.1 0-33.7 0-13.9 2.8-19.5 16.3-19.5 10.9 0 38.2 0 38.2 0V82.9c0 0-40.2 0-48.8 0 -52.5 0-76.1 23.1-76.1 67.3C211.9 188.8 211.9 197.4 211.9 197.4z"></path>
</svg>
<!--[if lt IE 9]><em>Facebook</em><![endif]--></a>
</li>
<li>
<a>
<svg viewBox="0 0 512 512">
<g>
<path d="M256 109.3c47.8 0 53.4 0.2 72.3 1 17.4 0.8 26.9 3.7 33.2 6.2 8.4 3.2 14.3 7.1 20.6 13.4 6.3 6.3 10.1 12.2 13.4 20.6 2.5 6.3 5.4 15.8 6.2 33.2 0.9 18.9 1 24.5 1 72.3s-0.2 53.4-1 72.3c-0.8 17.4-3.7 26.9-6.2 33.2 -3.2 8.4-7.1 14.3-13.4 20.6 -6.3 6.3-12.2 10.1-20.6 13.4 -6.3 2.5-15.8 5.4-33.2 6.2 -18.9 0.9-24.5 1-72.3 1s-53.4-0.2-72.3-1c-17.4-0.8-26.9-3.7-33.2-6.2 -8.4-3.2-14.3-7.1-20.6-13.4 -6.3-6.3-10.1-12.2-13.4-20.6 -2.5-6.3-5.4-15.8-6.2-33.2 -0.9-18.9-1-24.5-1-72.3s0.2-53.4 1-72.3c0.8-17.4 3.7-26.9 6.2-33.2 3.2-8.4 7.1-14.3 13.4-20.6 6.3-6.3 12.2-10.1 20.6-13.4 6.3-2.5 15.8-5.4 33.2-6.2C202.6 109.5 208.2 109.3 256 109.3M256 77.1c-48.6 0-54.7 0.2-73.8 1.1 -19 0.9-32.1 3.9-43.4 8.3 -11.8 4.6-21.7 10.7-31.7 20.6 -9.9 9.9-16.1 19.9-20.6 31.7 -4.4 11.4-7.4 24.4-8.3 43.4 -0.9 19.1-1.1 25.2-1.1 73.8 0 48.6 0.2 54.7 1.1 73.8 0.9 19 3.9 32.1 8.3 43.4 4.6 11.8 10.7 21.7 20.6 31.7 9.9 9.9 19.9 16.1 31.7 20.6 11.4 4.4 24.4 7.4 43.4 8.3 19.1 0.9 25.2 1.1 73.8 1.1s54.7-0.2 73.8-1.1c19-0.9 32.1-3.9 43.4-8.3 11.8-4.6 21.7-10.7 31.7-20.6 9.9-9.9 16.1-19.9 20.6-31.7 4.4-11.4 7.4-24.4 8.3-43.4 0.9-19.1 1.1-25.2 1.1-73.8s-0.2-54.7-1.1-73.8c-0.9-19-3.9-32.1-8.3-43.4 -4.6-11.8-10.7-21.7-20.6-31.7 -9.9-9.9-19.9-16.1-31.7-20.6 -11.4-4.4-24.4-7.4-43.4-8.3C310.7 77.3 304.6 77.1 256 77.1L256 77.1z"></path>
<path d="M256 164.1c-50.7 0-91.9 41.1-91.9 91.9s41.1 91.9 91.9 91.9 91.9-41.1 91.9-91.9S306.7 164.1 256 164.1zM256 315.6c-32.9 0-59.6-26.7-59.6-59.6s26.7-59.6 59.6-59.6 59.6 26.7 59.6 59.6S288.9 315.6 256 315.6z"></path>
<circle cx="351.5" cy="160.5" r="21.5"></circle>
</g>
</svg>
<!--[if lt IE 9]><em>Instagram</em><![endif]--></a>
</li>
<li>
<a>
<svg viewBox="0 0 512 512">
<path d="M186.4 142.4c0 19-15.3 34.5-34.2 34.5 -18.9 0-34.2-15.4-34.2-34.5 0-19 15.3-34.5 34.2-34.5C171.1 107.9 186.4 123.4 186.4 142.4zM181.4 201.3h-57.8V388.1h57.8V201.3zM273.8 201.3h-55.4V388.1h55.4c0 0 0-69.3 0-98 0-26.3 12.1-41.9 35.2-41.9 21.3 0 31.5 15 31.5 41.9 0 26.9 0 98 0 98h57.5c0 0 0-68.2 0-118.3 0-50-28.3-74.2-68-74.2 -39.6 0-56.3 30.9-56.3 30.9v-25.2H273.8z"></path>
</svg>
<!--[if lt IE 9]><em>LinkedIn</em><![endif]--></a>
</li>
<li>
<a>
<svg viewBox="0 0 512 512">
<path d="M153,131.3c-10,22.4-6.1,62.5-4.5,90.6c-10.8,6-24.7-4.5-32.5-4.5c-8.2,0-17.9,5.4-19.5,13.4
\t c-1.1,5.8,1.5,14.2,20,21.5c7.2,2.8,24.2,6.2,28.2,15.5c5.6,13.1-28.5,73.4-82,82.2c-4.2,0.7-7.2,4.4-6.9,8.7
\t c0.9,16.3,37.4,22.6,53.5,25.1c1.7,2.2,3,11.7,5.1,18.9c1,3.2,3.4,7.1,9.7,7.1c8.2,0,21.9-6.3,45.6-2.4
\t c23.3,3.9,45.2,36.9,87.3,36.9c39.1,0,62.4-33.2,84.8-36.9c13-2.2,24.1-1.5,36.6,1c8.6,1.7,16.3,2.6,18.7-5.8
\t c2.2-7.3,3.5-16.5,5.1-18.7c16-2.5,52.6-8.8,53.5-25.1c0.2-4.2-2.8-8-6.9-8.7c-52.6-8.7-87.7-68.8-82-82.2
\t c3.9-9.3,20.9-12.6,28.2-15.5c13.6-5.4,20.4-11.9,20.2-19.6c-0.2-9.8-11.9-15.6-20.6-15.6c-8.8,0-21.4,10.4-31.6,4.8
\t c1.6-28.3,5.5-68.3-4.5-90.6c-18.9-42.4-61-63.8-103.1-63.8C213.9,67.4,172.1,88.6,153,131.3z"></path>
</svg>
<!--[if lt IE 9]><em>Snapchat</em><![endif]--></a>
</li>
<li>
<a>
<svg viewBox="0 0 512 512">
<path d="M419.6 168.6c-11.7 5.2-24.2 8.7-37.4 10.2 13.4-8.1 23.8-20.8 28.6-36 -12.6 7.5-26.5 12.9-41.3 15.8 -11.9-12.6-28.8-20.6-47.5-20.6 -42 0-72.9 39.2-63.4 79.9 -54.1-2.7-102.1-28.6-134.2-68 -17 29.2-8.8 67.5 20.1 86.9 -10.7-0.3-20.7-3.3-29.5-8.1 -0.7 30.2 20.9 58.4 52.2 64.6 -9.2 2.5-19.2 3.1-29.4 1.1 8.3 25.9 32.3 44.7 60.8 45.2 -27.4 21.4-61.8 31-96.4 27 28.8 18.5 63 29.2 99.8 29.2 120.8 0 189.1-102.1 185-193.6C399.9 193.1 410.9 181.7 419.6 168.6z"></path>
</svg>
<!--[if lt IE 9]><em>Twitter</em><![endif]--></a>
</li>
<li>
<a>
<svg viewBox="0 0 512 512">
<path d="M422.6 193.6c-5.3-45.3-23.3-51.6-59-54 -50.8-3.5-164.3-3.5-215.1 0 -35.7 2.4-53.7 8.7-59 54 -4 33.6-4 91.1 0 124.8 5.3 45.3 23.3 51.6 59 54 50.9 3.5 164.3 3.5 215.1 0 35.7-2.4 53.7-8.7 59-54C426.6 284.8 426.6 227.3 422.6 193.6zM222.2 303.4v-94.6l90.7 47.3L222.2 303.4z"></path>
</svg>
<!--[if lt IE 9]><em>YouTube</em><![endif]--></a>
</li>
</ul>
</div>