将 SVG 图标垂直对齐到 UL 中心
Vertically align SVG icons to center in UL
我为此创建了一个示例代码，这样会更有意义。我想将所有图标垂直居中对齐。图标有不同的大小。为了调试目的，我添加了边框，所以我们可以准确地看到它是否垂直居中。
我知道一种方法可以为 LI 标签提供固定宽度，然后通过使 is position absolute 垂直对齐 A 标签，但我正在寻找更灵活的解决方案，因为在这个例子中我已经为 SVG 文件提供了固定宽度但这不会发生在主站点上。
谢谢。
.wrapper {
width: 300px;
margin: 50px auto;
border: 2px solid grey;
}
.wrapper ul.socialmedia-menu {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
margin: 0px;
padding: 0px;
}
.wrapper ul.socialmedia-menu li {
list-style: none;
border: 1px solid blue;
}
.wrapper ul.socialmedia-menu li a svg {
width: 30px;
height: auto;
}
<div class="wrapper">
<ul class="socialmedia-menu">
<li>
<a href="#"><svg class="i_instagram" preserveAspectRatio="xMidYMid" width="18" height="18" viewBox="0 0 18 18"><use xlink:href="#i_instagram"></use></svg></a>
</li>
<li>
<a href="#"><svg class="i_twitter" preserveAspectRatio="xMidYMid" width="18.438" height="15" viewBox="0 0 18.438 15"><use xlink:href="#i_twitter"></use></svg></a>
</li>
<li>
<a href="#"><svg class="i_pinterest" preserveAspectRatio="xMidYMid" width="17.031" height="17.03" viewBox="0 0 17.031 17.03"><use xlink:href="#i_pinterest"></use>
</svg></a>
</li>
<li>
<a href="#"><svg class="i_facebook" preserveAspectRatio="xMidYMid" width="21.125" height="21.16" viewBox="0 0 21.125 21.16"><use xlink:href="#i_facebook"></use></svg></a>
</li>
<li>
<a href="#"><svg class="i_tumblr" preserveAspectRatio="xMidYMid" width="9.126" height="15.53" viewBox="0 0 9.126 15.53"><use xlink:href="#i_tumblr"></use></svg></a>
</li>
<li>
<a href="#"><svg class="i_email" preserveAspectRatio="xMidYMid" width="18" height="14" viewBox="0 0 18 14"><use xlink:href="#i_email"></use></svg></a>
</li>
</ul>
</div>
<!--- SVG DEFINITIONS : You can skip looking at it :) -->
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="display: none;">
<defs>
<g id="i_instagram">
<path d="M118.989,4005.62c2.4,0,2.689.01,3.638,0.06a4.811,4.811,0,0,1,1.672.31,2.807,2.807,0,0,1,1.036.67,2.765,2.765,0,0,1,.673,1.04,4.919,4.919,0,0,1,.31,1.67c0.043,0.95.052,1.23,0.052,3.64s-0.009,2.68-.052,3.63a5.054,5.054,0,0,1-.31,1.68,2.728,2.728,0,0,1-.673,1.03,2.687,2.687,0,0,1-1.036.67,4.811,4.811,0,0,1-1.672.31c-0.949.05-1.233,0.06-3.638,0.06s-2.689-.01-3.638-0.06a4.817,4.817,0,0,1-1.672-.31,2.684,2.684,0,0,1-1.035-.67,2.728,2.728,0,0,1-.673-1.03,5.027,5.027,0,0,1-.31-1.68c-0.044-.95-0.053-1.23-0.053-3.63s0.009-2.69.053-3.64a4.894,4.894,0,0,1,.31-1.67,2.765,2.765,0,0,1,.673-1.04,2.8,2.8,0,0,1,1.035-.67,4.817,4.817,0,0,1,1.672-.31c0.95-.05,1.234-0.06,3.638-0.06m0-1.62c-2.445,0-2.751.01-3.712,0.06a6.6,6.6,0,0,0-2.185.41,4.6,4.6,0,0,0-2.633,2.64,6.543,6.543,0,0,0-.419,2.18c-0.044.96-.054,1.27-0.054,3.72s0.01,2.75.054,3.71a6.543,6.543,0,0,0,.419,2.18,4.366,4.366,0,0,0,1.038,1.6,4.429,4.429,0,0,0,1.595,1.04,6.839,6.839,0,0,0,2.185.42c0.961,0.04,1.267.05,3.712,0.05s2.752-.01,3.712-0.05a6.84,6.84,0,0,0,2.186-.42,4.429,4.429,0,0,0,1.595-1.04,4.366,4.366,0,0,0,1.038-1.6,6.521,6.521,0,0,0,.418-2.18c0.044-.96.055-1.27,0.055-3.71s-0.011-2.76-.055-3.72a6.521,6.521,0,0,0-.418-2.18,4.6,4.6,0,0,0-2.633-2.64,6.6,6.6,0,0,0-2.186-.41c-0.96-.05-1.266-0.06-3.712-0.06h0Zm0,4.38a4.625,4.625,0,1,0,4.624,4.63A4.625,4.625,0,0,0,118.989,4008.38Zm0,7.63a3.005,3.005,0,1,1,3-3A3.005,3.005,0,0,1,118.989,4016.01Zm5.887-7.81a1.081,1.081,0,1,1-1.081-1.08A1.078,1.078,0,0,1,124.876,4008.2Z" transform="translate(-110 -4004)"></path>
</g>
</defs>
</svg>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="display: none;">
<defs>
<g id="i_twitter">
<path d="M164.2,4007.27a7.544,7.544,0,0,1-2.174.59,3.8,3.8,0,0,0,1.664-2.09,7.673,7.673,0,0,1-2.4.92,3.784,3.784,0,0,0-6.549,2.59,3.871,3.871,0,0,0,.1.86,10.749,10.749,0,0,1-7.8-3.95,3.713,3.713,0,0,0-.512,1.9,3.788,3.788,0,0,0,1.684,3.15,3.818,3.818,0,0,1-1.715-.47v0.04a3.794,3.794,0,0,0,3.036,3.72,4.077,4.077,0,0,1-1,.13,4.161,4.161,0,0,1-.712-0.07,3.794,3.794,0,0,0,3.536,2.63,7.628,7.628,0,0,1-4.7,1.62,8.942,8.942,0,0,1-.9-0.05,10.766,10.766,0,0,0,16.572-9.07c0-.17,0-0.33-0.011-0.49A7.768,7.768,0,0,0,164.2,4007.27Z" transform="translate(-145.75 -4005.5)"></path>
</g>
</defs>
</svg>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="display: none;">
<defs>
<g id="i_pinterest">
<path d="M191.98,4004.48a8.508,8.508,0,0,0-3.415,16.3,7.452,7.452,0,0,1,.148-1.95c0.164-.69,1.095-4.64,1.095-4.64a3.235,3.235,0,0,1-.272-1.34c0-1.26.731-2.21,1.64-2.21a1.145,1.145,0,0,1,1.148,1.28,18.34,18.34,0,0,1-.751,3.02,1.318,1.318,0,0,0,1.342,1.64c1.612,0,2.7-2.07,2.7-4.52,0-1.87-1.256-3.26-3.54-3.26a4.025,4.025,0,0,0-4.188,4.07,2.473,2.473,0,0,0,.561,1.67,0.406,0.406,0,0,1,.122.47c-0.041.16-.134,0.54-0.173,0.69a0.294,0.294,0,0,1-.426.21,3.283,3.283,0,0,1-1.742-3.25c0-2.42,2.038-5.32,6.08-5.32a5.085,5.085,0,0,1,5.385,4.88c0,3.33-1.855,5.83-4.59,5.83a2.449,2.449,0,0,1-2.078-1.06s-0.494,1.96-.6,2.34a7.166,7.166,0,0,1-.856,1.82,8.711,8.711,0,0,0,2.411.35A8.51,8.51,0,0,0,191.98,4004.48Z" transform="translate(-183.469 -4004.47)"></path>
</g>
</defs>
</svg>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="display: none;">
<defs>
<g id="i_facebook">
<path d="M19.284,21.151 L15.498,21.151 L15.498,11.216 L18.433,11.216 L18.653,8.347 L15.498,8.347 L15.498,7.447 L15.498,6.418 L15.498,6.106 C15.498,5.334 16.187,5.059 16.957,5.059 C17.726,5.059 18.551,5.298 18.551,5.298 L19.045,2.358 C19.045,2.358 17.993,2.002 15.498,2.002 C13.966,2.002 13.075,2.586 12.427,3.446 C11.811,4.258 11.789,5.569 11.789,6.418 L11.789,6.565 L11.789,7.447 L11.789,8.347 L9.810,8.347 L9.810,11.216 L11.789,11.216 L11.789,21.151 L1.835,21.151 C0.824,21.151 0.003,20.332 0.003,19.314 L0.003,1.826 C0.003,0.812 0.824,-0.011 1.835,-0.011 L19.284,-0.011 C20.295,-0.011 21.116,0.812 21.116,1.826 L21.116,19.314 C21.116,20.332 20.295,21.151 19.284,21.151 Z"></path>
</g>
</defs>
</svg>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="display: none;">
<defs>
<g id="i_tumblr">
<path d="M267.393,4017.64a1.37,1.37,0,0,1-1.525-1.53v-4.56h2.957v-2.64H265.88v-3.93h-2.322a0.131,0.131,0,0,0-.114.12,4.753,4.753,0,0,1-3.119,4.18v2.27h1.83v4.8c0,1.74,1.082,4.2,4.534,4.15a4.3,4.3,0,0,0,2.746-.91l-0.763-2.21A3.993,3.993,0,0,1,267.393,4017.64Z" transform="translate(-260.312 -4004.97)"></path>
</g>
</defs>
</svg>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="display: none;">
<defs>
<g id="i_email">
<path d="M291.988,4005.99v14h18v-14h-18Zm16.14,1.55-7.139,6-7.139-6h14.278Zm-14.64,10.9v-9.2l7.5,6.31,7.5-6.31v9.2h-15Z" transform="translate(-292 -4006)"></path>
</g>
</defs>
</svg>
display:flex 在父项 li 上使用 align-items 垂直对齐 SVG 居中。
.wrapper ul.socialmedia-menu li{
display: -webkit-flex;
display: flex;
-webkit-align-items: center;
align-items: center;
-webkit-justify-content: center;
justify-content: center;
}
.wrapper {
width: 300px;
margin: 50px auto;
border: 2px solid grey;
}
.wrapper ul.socialmedia-menu {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
margin: 0px;
padding: 0px;
}
.wrapper ul.socialmedia-menu li {
list-style: none;
border: 1px solid blue;
display: -webkit-flex;
display: flex;
-webkit-align-items: center;
align-items: center;
-webkit-justify-content: center;
justify-content: center;
}
.wrapper ul.socialmedia-menu li a svg {
width: 30px;
height: auto;
}
<div class="wrapper">
<ul class="socialmedia-menu">
<li>
<a href="#"><svg class="i_instagram" preserveAspectRatio="xMidYMid" width="18" height="18" viewBox="0 0 18 18"><use xlink:href="#i_instagram"></use></svg></a>
</li>
<li>
<a href="#"><svg class="i_twitter" preserveAspectRatio="xMidYMid" width="18.438" height="15" viewBox="0 0 18.438 15"><use xlink:href="#i_twitter"></use></svg></a>
</li>
<li>
<a href="#"><svg class="i_pinterest" preserveAspectRatio="xMidYMid" width="17.031" height="17.03" viewBox="0 0 17.031 17.03"><use xlink:href="#i_pinterest"></use>
</svg></a>
</li>
<li>
<a href="#"><svg class="i_facebook" preserveAspectRatio="xMidYMid" width="21.125" height="21.16" viewBox="0 0 21.125 21.16"><use xlink:href="#i_facebook"></use></svg></a>
</li>
<li>
<a href="#"><svg class="i_tumblr" preserveAspectRatio="xMidYMid" width="9.126" height="15.53" viewBox="0 0 9.126 15.53"><use xlink:href="#i_tumblr"></use></svg></a>
</li>
<li>
<a href="#"><svg class="i_email" preserveAspectRatio="xMidYMid" width="18" height="14" viewBox="0 0 18 14"><use xlink:href="#i_email"></use></svg></a>
</li>
</ul>
</div>
<!--- SVG DEFINITIONS : You can skip looking at it :) -->
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="display: none;">
<defs>
<g id="i_instagram">
<path d="M118.989,4005.62c2.4,0,2.689.01,3.638,0.06a4.811,4.811,0,0,1,1.672.31,2.807,2.807,0,0,1,1.036.67,2.765,2.765,0,0,1,.673,1.04,4.919,4.919,0,0,1,.31,1.67c0.043,0.95.052,1.23,0.052,3.64s-0.009,2.68-.052,3.63a5.054,5.054,0,0,1-.31,1.68,2.728,2.728,0,0,1-.673,1.03,2.687,2.687,0,0,1-1.036.67,4.811,4.811,0,0,1-1.672.31c-0.949.05-1.233,0.06-3.638,0.06s-2.689-.01-3.638-0.06a4.817,4.817,0,0,1-1.672-.31,2.684,2.684,0,0,1-1.035-.67,2.728,2.728,0,0,1-.673-1.03,5.027,5.027,0,0,1-.31-1.68c-0.044-.95-0.053-1.23-0.053-3.63s0.009-2.69.053-3.64a4.894,4.894,0,0,1,.31-1.67,2.765,2.765,0,0,1,.673-1.04,2.8,2.8,0,0,1,1.035-.67,4.817,4.817,0,0,1,1.672-.31c0.95-.05,1.234-0.06,3.638-0.06m0-1.62c-2.445,0-2.751.01-3.712,0.06a6.6,6.6,0,0,0-2.185.41,4.6,4.6,0,0,0-2.633,2.64,6.543,6.543,0,0,0-.419,2.18c-0.044.96-.054,1.27-0.054,3.72s0.01,2.75.054,3.71a6.543,6.543,0,0,0,.419,2.18,4.366,4.366,0,0,0,1.038,1.6,4.429,4.429,0,0,0,1.595,1.04,6.839,6.839,0,0,0,2.185.42c0.961,0.04,1.267.05,3.712,0.05s2.752-.01,3.712-0.05a6.84,6.84,0,0,0,2.186-.42,4.429,4.429,0,0,0,1.595-1.04,4.366,4.366,0,0,0,1.038-1.6,6.521,6.521,0,0,0,.418-2.18c0.044-.96.055-1.27,0.055-3.71s-0.011-2.76-.055-3.72a6.521,6.521,0,0,0-.418-2.18,4.6,4.6,0,0,0-2.633-2.64,6.6,6.6,0,0,0-2.186-.41c-0.96-.05-1.266-0.06-3.712-0.06h0Zm0,4.38a4.625,4.625,0,1,0,4.624,4.63A4.625,4.625,0,0,0,118.989,4008.38Zm0,7.63a3.005,3.005,0,1,1,3-3A3.005,3.005,0,0,1,118.989,4016.01Zm5.887-7.81a1.081,1.081,0,1,1-1.081-1.08A1.078,1.078,0,0,1,124.876,4008.2Z" transform="translate(-110 -4004)"></path>
</g>
</defs>
</svg>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="display: none;">
<defs>
<g id="i_twitter">
<path d="M164.2,4007.27a7.544,7.544,0,0,1-2.174.59,3.8,3.8,0,0,0,1.664-2.09,7.673,7.673,0,0,1-2.4.92,3.784,3.784,0,0,0-6.549,2.59,3.871,3.871,0,0,0,.1.86,10.749,10.749,0,0,1-7.8-3.95,3.713,3.713,0,0,0-.512,1.9,3.788,3.788,0,0,0,1.684,3.15,3.818,3.818,0,0,1-1.715-.47v0.04a3.794,3.794,0,0,0,3.036,3.72,4.077,4.077,0,0,1-1,.13,4.161,4.161,0,0,1-.712-0.07,3.794,3.794,0,0,0,3.536,2.63,7.628,7.628,0,0,1-4.7,1.62,8.942,8.942,0,0,1-.9-0.05,10.766,10.766,0,0,0,16.572-9.07c0-.17,0-0.33-0.011-0.49A7.768,7.768,0,0,0,164.2,4007.27Z" transform="translate(-145.75 -4005.5)"></path>
</g>
</defs>
</svg>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="display: none;">
<defs>
<g id="i_pinterest">
<path d="M191.98,4004.48a8.508,8.508,0,0,0-3.415,16.3,7.452,7.452,0,0,1,.148-1.95c0.164-.69,1.095-4.64,1.095-4.64a3.235,3.235,0,0,1-.272-1.34c0-1.26.731-2.21,1.64-2.21a1.145,1.145,0,0,1,1.148,1.28,18.34,18.34,0,0,1-.751,3.02,1.318,1.318,0,0,0,1.342,1.64c1.612,0,2.7-2.07,2.7-4.52,0-1.87-1.256-3.26-3.54-3.26a4.025,4.025,0,0,0-4.188,4.07,2.473,2.473,0,0,0,.561,1.67,0.406,0.406,0,0,1,.122.47c-0.041.16-.134,0.54-0.173,0.69a0.294,0.294,0,0,1-.426.21,3.283,3.283,0,0,1-1.742-3.25c0-2.42,2.038-5.32,6.08-5.32a5.085,5.085,0,0,1,5.385,4.88c0,3.33-1.855,5.83-4.59,5.83a2.449,2.449,0,0,1-2.078-1.06s-0.494,1.96-.6,2.34a7.166,7.166,0,0,1-.856,1.82,8.711,8.711,0,0,0,2.411.35A8.51,8.51,0,0,0,191.98,4004.48Z" transform="translate(-183.469 -4004.47)"></path>
</g>
</defs>
</svg>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="display: none;">
<defs>
<g id="i_facebook">
<path d="M19.284,21.151 L15.498,21.151 L15.498,11.216 L18.433,11.216 L18.653,8.347 L15.498,8.347 L15.498,7.447 L15.498,6.418 L15.498,6.106 C15.498,5.334 16.187,5.059 16.957,5.059 C17.726,5.059 18.551,5.298 18.551,5.298 L19.045,2.358 C19.045,2.358 17.993,2.002 15.498,2.002 C13.966,2.002 13.075,2.586 12.427,3.446 C11.811,4.258 11.789,5.569 11.789,6.418 L11.789,6.565 L11.789,7.447 L11.789,8.347 L9.810,8.347 L9.810,11.216 L11.789,11.216 L11.789,21.151 L1.835,21.151 C0.824,21.151 0.003,20.332 0.003,19.314 L0.003,1.826 C0.003,0.812 0.824,-0.011 1.835,-0.011 L19.284,-0.011 C20.295,-0.011 21.116,0.812 21.116,1.826 L21.116,19.314 C21.116,20.332 20.295,21.151 19.284,21.151 Z"></path>
</g>
</defs>
</svg>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="display: none;">
<defs>
<g id="i_tumblr">
<path d="M267.393,4017.64a1.37,1.37,0,0,1-1.525-1.53v-4.56h2.957v-2.64H265.88v-3.93h-2.322a0.131,0.131,0,0,0-.114.12,4.753,4.753,0,0,1-3.119,4.18v2.27h1.83v4.8c0,1.74,1.082,4.2,4.534,4.15a4.3,4.3,0,0,0,2.746-.91l-0.763-2.21A3.993,3.993,0,0,1,267.393,4017.64Z" transform="translate(-260.312 -4004.97)"></path>
</g>
</defs>
</svg>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="display: none;">
<defs>
<g id="i_email">
<path d="M291.988,4005.99v14h18v-14h-18Zm16.14,1.55-7.139,6-7.139-6h14.278Zm-14.64,10.9v-9.2l7.5,6.31,7.5-6.31v9.2h-15Z" transform="translate(-292 -4006)"></path>
</g>
</defs>
</svg>
我为此创建了一个示例代码，这样会更有意义。我想将所有图标垂直居中对齐。图标有不同的大小。为了调试目的，我添加了边框，所以我们可以准确地看到它是否垂直居中。
我知道一种方法可以为 LI 标签提供固定宽度，然后通过使 is position absolute 垂直对齐 A 标签，但我正在寻找更灵活的解决方案，因为在这个例子中我已经为 SVG 文件提供了固定宽度但这不会发生在主站点上。
谢谢。
.wrapper {
width: 300px;
margin: 50px auto;
border: 2px solid grey;
}
.wrapper ul.socialmedia-menu {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
margin: 0px;
padding: 0px;
}
.wrapper ul.socialmedia-menu li {
list-style: none;
border: 1px solid blue;
}
.wrapper ul.socialmedia-menu li a svg {
width: 30px;
height: auto;
}
<div class="wrapper">
<ul class="socialmedia-menu">
<li>
<a href="#"><svg class="i_instagram" preserveAspectRatio="xMidYMid" width="18" height="18" viewBox="0 0 18 18"><use xlink:href="#i_instagram"></use></svg></a>
</li>
<li>
<a href="#"><svg class="i_twitter" preserveAspectRatio="xMidYMid" width="18.438" height="15" viewBox="0 0 18.438 15"><use xlink:href="#i_twitter"></use></svg></a>
</li>
<li>
<a href="#"><svg class="i_pinterest" preserveAspectRatio="xMidYMid" width="17.031" height="17.03" viewBox="0 0 17.031 17.03"><use xlink:href="#i_pinterest"></use>
</svg></a>
</li>
<li>
<a href="#"><svg class="i_facebook" preserveAspectRatio="xMidYMid" width="21.125" height="21.16" viewBox="0 0 21.125 21.16"><use xlink:href="#i_facebook"></use></svg></a>
</li>
<li>
<a href="#"><svg class="i_tumblr" preserveAspectRatio="xMidYMid" width="9.126" height="15.53" viewBox="0 0 9.126 15.53"><use xlink:href="#i_tumblr"></use></svg></a>
</li>
<li>
<a href="#"><svg class="i_email" preserveAspectRatio="xMidYMid" width="18" height="14" viewBox="0 0 18 14"><use xlink:href="#i_email"></use></svg></a>
</li>
</ul>
</div>
<!--- SVG DEFINITIONS : You can skip looking at it :) -->
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="display: none;">
<defs>
<g id="i_instagram">
<path d="M118.989,4005.62c2.4,0,2.689.01,3.638,0.06a4.811,4.811,0,0,1,1.672.31,2.807,2.807,0,0,1,1.036.67,2.765,2.765,0,0,1,.673,1.04,4.919,4.919,0,0,1,.31,1.67c0.043,0.95.052,1.23,0.052,3.64s-0.009,2.68-.052,3.63a5.054,5.054,0,0,1-.31,1.68,2.728,2.728,0,0,1-.673,1.03,2.687,2.687,0,0,1-1.036.67,4.811,4.811,0,0,1-1.672.31c-0.949.05-1.233,0.06-3.638,0.06s-2.689-.01-3.638-0.06a4.817,4.817,0,0,1-1.672-.31,2.684,2.684,0,0,1-1.035-.67,2.728,2.728,0,0,1-.673-1.03,5.027,5.027,0,0,1-.31-1.68c-0.044-.95-0.053-1.23-0.053-3.63s0.009-2.69.053-3.64a4.894,4.894,0,0,1,.31-1.67,2.765,2.765,0,0,1,.673-1.04,2.8,2.8,0,0,1,1.035-.67,4.817,4.817,0,0,1,1.672-.31c0.95-.05,1.234-0.06,3.638-0.06m0-1.62c-2.445,0-2.751.01-3.712,0.06a6.6,6.6,0,0,0-2.185.41,4.6,4.6,0,0,0-2.633,2.64,6.543,6.543,0,0,0-.419,2.18c-0.044.96-.054,1.27-0.054,3.72s0.01,2.75.054,3.71a6.543,6.543,0,0,0,.419,2.18,4.366,4.366,0,0,0,1.038,1.6,4.429,4.429,0,0,0,1.595,1.04,6.839,6.839,0,0,0,2.185.42c0.961,0.04,1.267.05,3.712,0.05s2.752-.01,3.712-0.05a6.84,6.84,0,0,0,2.186-.42,4.429,4.429,0,0,0,1.595-1.04,4.366,4.366,0,0,0,1.038-1.6,6.521,6.521,0,0,0,.418-2.18c0.044-.96.055-1.27,0.055-3.71s-0.011-2.76-.055-3.72a6.521,6.521,0,0,0-.418-2.18,4.6,4.6,0,0,0-2.633-2.64,6.6,6.6,0,0,0-2.186-.41c-0.96-.05-1.266-0.06-3.712-0.06h0Zm0,4.38a4.625,4.625,0,1,0,4.624,4.63A4.625,4.625,0,0,0,118.989,4008.38Zm0,7.63a3.005,3.005,0,1,1,3-3A3.005,3.005,0,0,1,118.989,4016.01Zm5.887-7.81a1.081,1.081,0,1,1-1.081-1.08A1.078,1.078,0,0,1,124.876,4008.2Z" transform="translate(-110 -4004)"></path>
</g>
</defs>
</svg>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="display: none;">
<defs>
<g id="i_twitter">
<path d="M164.2,4007.27a7.544,7.544,0,0,1-2.174.59,3.8,3.8,0,0,0,1.664-2.09,7.673,7.673,0,0,1-2.4.92,3.784,3.784,0,0,0-6.549,2.59,3.871,3.871,0,0,0,.1.86,10.749,10.749,0,0,1-7.8-3.95,3.713,3.713,0,0,0-.512,1.9,3.788,3.788,0,0,0,1.684,3.15,3.818,3.818,0,0,1-1.715-.47v0.04a3.794,3.794,0,0,0,3.036,3.72,4.077,4.077,0,0,1-1,.13,4.161,4.161,0,0,1-.712-0.07,3.794,3.794,0,0,0,3.536,2.63,7.628,7.628,0,0,1-4.7,1.62,8.942,8.942,0,0,1-.9-0.05,10.766,10.766,0,0,0,16.572-9.07c0-.17,0-0.33-0.011-0.49A7.768,7.768,0,0,0,164.2,4007.27Z" transform="translate(-145.75 -4005.5)"></path>
</g>
</defs>
</svg>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="display: none;">
<defs>
<g id="i_pinterest">
<path d="M191.98,4004.48a8.508,8.508,0,0,0-3.415,16.3,7.452,7.452,0,0,1,.148-1.95c0.164-.69,1.095-4.64,1.095-4.64a3.235,3.235,0,0,1-.272-1.34c0-1.26.731-2.21,1.64-2.21a1.145,1.145,0,0,1,1.148,1.28,18.34,18.34,0,0,1-.751,3.02,1.318,1.318,0,0,0,1.342,1.64c1.612,0,2.7-2.07,2.7-4.52,0-1.87-1.256-3.26-3.54-3.26a4.025,4.025,0,0,0-4.188,4.07,2.473,2.473,0,0,0,.561,1.67,0.406,0.406,0,0,1,.122.47c-0.041.16-.134,0.54-0.173,0.69a0.294,0.294,0,0,1-.426.21,3.283,3.283,0,0,1-1.742-3.25c0-2.42,2.038-5.32,6.08-5.32a5.085,5.085,0,0,1,5.385,4.88c0,3.33-1.855,5.83-4.59,5.83a2.449,2.449,0,0,1-2.078-1.06s-0.494,1.96-.6,2.34a7.166,7.166,0,0,1-.856,1.82,8.711,8.711,0,0,0,2.411.35A8.51,8.51,0,0,0,191.98,4004.48Z" transform="translate(-183.469 -4004.47)"></path>
</g>
</defs>
</svg>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="display: none;">
<defs>
<g id="i_facebook">
<path d="M19.284,21.151 L15.498,21.151 L15.498,11.216 L18.433,11.216 L18.653,8.347 L15.498,8.347 L15.498,7.447 L15.498,6.418 L15.498,6.106 C15.498,5.334 16.187,5.059 16.957,5.059 C17.726,5.059 18.551,5.298 18.551,5.298 L19.045,2.358 C19.045,2.358 17.993,2.002 15.498,2.002 C13.966,2.002 13.075,2.586 12.427,3.446 C11.811,4.258 11.789,5.569 11.789,6.418 L11.789,6.565 L11.789,7.447 L11.789,8.347 L9.810,8.347 L9.810,11.216 L11.789,11.216 L11.789,21.151 L1.835,21.151 C0.824,21.151 0.003,20.332 0.003,19.314 L0.003,1.826 C0.003,0.812 0.824,-0.011 1.835,-0.011 L19.284,-0.011 C20.295,-0.011 21.116,0.812 21.116,1.826 L21.116,19.314 C21.116,20.332 20.295,21.151 19.284,21.151 Z"></path>
</g>
</defs>
</svg>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="display: none;">
<defs>
<g id="i_tumblr">
<path d="M267.393,4017.64a1.37,1.37,0,0,1-1.525-1.53v-4.56h2.957v-2.64H265.88v-3.93h-2.322a0.131,0.131,0,0,0-.114.12,4.753,4.753,0,0,1-3.119,4.18v2.27h1.83v4.8c0,1.74,1.082,4.2,4.534,4.15a4.3,4.3,0,0,0,2.746-.91l-0.763-2.21A3.993,3.993,0,0,1,267.393,4017.64Z" transform="translate(-260.312 -4004.97)"></path>
</g>
</defs>
</svg>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="display: none;">
<defs>
<g id="i_email">
<path d="M291.988,4005.99v14h18v-14h-18Zm16.14,1.55-7.139,6-7.139-6h14.278Zm-14.64,10.9v-9.2l7.5,6.31,7.5-6.31v9.2h-15Z" transform="translate(-292 -4006)"></path>
</g>
</defs>
</svg>
display:flex 在父项 li 上使用 align-items 垂直对齐 SVG 居中。
.wrapper ul.socialmedia-menu li{
display: -webkit-flex;
display: flex;
-webkit-align-items: center;
align-items: center;
-webkit-justify-content: center;
justify-content: center;
}
.wrapper {
width: 300px;
margin: 50px auto;
border: 2px solid grey;
}
.wrapper ul.socialmedia-menu {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
margin: 0px;
padding: 0px;
}
.wrapper ul.socialmedia-menu li {
list-style: none;
border: 1px solid blue;
display: -webkit-flex;
display: flex;
-webkit-align-items: center;
align-items: center;
-webkit-justify-content: center;
justify-content: center;
}
.wrapper ul.socialmedia-menu li a svg {
width: 30px;
height: auto;
}
<div class="wrapper">
<ul class="socialmedia-menu">
<li>
<a href="#"><svg class="i_instagram" preserveAspectRatio="xMidYMid" width="18" height="18" viewBox="0 0 18 18"><use xlink:href="#i_instagram"></use></svg></a>
</li>
<li>
<a href="#"><svg class="i_twitter" preserveAspectRatio="xMidYMid" width="18.438" height="15" viewBox="0 0 18.438 15"><use xlink:href="#i_twitter"></use></svg></a>
</li>
<li>
<a href="#"><svg class="i_pinterest" preserveAspectRatio="xMidYMid" width="17.031" height="17.03" viewBox="0 0 17.031 17.03"><use xlink:href="#i_pinterest"></use>
</svg></a>
</li>
<li>
<a href="#"><svg class="i_facebook" preserveAspectRatio="xMidYMid" width="21.125" height="21.16" viewBox="0 0 21.125 21.16"><use xlink:href="#i_facebook"></use></svg></a>
</li>
<li>
<a href="#"><svg class="i_tumblr" preserveAspectRatio="xMidYMid" width="9.126" height="15.53" viewBox="0 0 9.126 15.53"><use xlink:href="#i_tumblr"></use></svg></a>
</li>
<li>
<a href="#"><svg class="i_email" preserveAspectRatio="xMidYMid" width="18" height="14" viewBox="0 0 18 14"><use xlink:href="#i_email"></use></svg></a>
</li>
</ul>
</div>
<!--- SVG DEFINITIONS : You can skip looking at it :) -->
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="display: none;">
<defs>
<g id="i_instagram">
<path d="M118.989,4005.62c2.4,0,2.689.01,3.638,0.06a4.811,4.811,0,0,1,1.672.31,2.807,2.807,0,0,1,1.036.67,2.765,2.765,0,0,1,.673,1.04,4.919,4.919,0,0,1,.31,1.67c0.043,0.95.052,1.23,0.052,3.64s-0.009,2.68-.052,3.63a5.054,5.054,0,0,1-.31,1.68,2.728,2.728,0,0,1-.673,1.03,2.687,2.687,0,0,1-1.036.67,4.811,4.811,0,0,1-1.672.31c-0.949.05-1.233,0.06-3.638,0.06s-2.689-.01-3.638-0.06a4.817,4.817,0,0,1-1.672-.31,2.684,2.684,0,0,1-1.035-.67,2.728,2.728,0,0,1-.673-1.03,5.027,5.027,0,0,1-.31-1.68c-0.044-.95-0.053-1.23-0.053-3.63s0.009-2.69.053-3.64a4.894,4.894,0,0,1,.31-1.67,2.765,2.765,0,0,1,.673-1.04,2.8,2.8,0,0,1,1.035-.67,4.817,4.817,0,0,1,1.672-.31c0.95-.05,1.234-0.06,3.638-0.06m0-1.62c-2.445,0-2.751.01-3.712,0.06a6.6,6.6,0,0,0-2.185.41,4.6,4.6,0,0,0-2.633,2.64,6.543,6.543,0,0,0-.419,2.18c-0.044.96-.054,1.27-0.054,3.72s0.01,2.75.054,3.71a6.543,6.543,0,0,0,.419,2.18,4.366,4.366,0,0,0,1.038,1.6,4.429,4.429,0,0,0,1.595,1.04,6.839,6.839,0,0,0,2.185.42c0.961,0.04,1.267.05,3.712,0.05s2.752-.01,3.712-0.05a6.84,6.84,0,0,0,2.186-.42,4.429,4.429,0,0,0,1.595-1.04,4.366,4.366,0,0,0,1.038-1.6,6.521,6.521,0,0,0,.418-2.18c0.044-.96.055-1.27,0.055-3.71s-0.011-2.76-.055-3.72a6.521,6.521,0,0,0-.418-2.18,4.6,4.6,0,0,0-2.633-2.64,6.6,6.6,0,0,0-2.186-.41c-0.96-.05-1.266-0.06-3.712-0.06h0Zm0,4.38a4.625,4.625,0,1,0,4.624,4.63A4.625,4.625,0,0,0,118.989,4008.38Zm0,7.63a3.005,3.005,0,1,1,3-3A3.005,3.005,0,0,1,118.989,4016.01Zm5.887-7.81a1.081,1.081,0,1,1-1.081-1.08A1.078,1.078,0,0,1,124.876,4008.2Z" transform="translate(-110 -4004)"></path>
</g>
</defs>
</svg>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="display: none;">
<defs>
<g id="i_twitter">
<path d="M164.2,4007.27a7.544,7.544,0,0,1-2.174.59,3.8,3.8,0,0,0,1.664-2.09,7.673,7.673,0,0,1-2.4.92,3.784,3.784,0,0,0-6.549,2.59,3.871,3.871,0,0,0,.1.86,10.749,10.749,0,0,1-7.8-3.95,3.713,3.713,0,0,0-.512,1.9,3.788,3.788,0,0,0,1.684,3.15,3.818,3.818,0,0,1-1.715-.47v0.04a3.794,3.794,0,0,0,3.036,3.72,4.077,4.077,0,0,1-1,.13,4.161,4.161,0,0,1-.712-0.07,3.794,3.794,0,0,0,3.536,2.63,7.628,7.628,0,0,1-4.7,1.62,8.942,8.942,0,0,1-.9-0.05,10.766,10.766,0,0,0,16.572-9.07c0-.17,0-0.33-0.011-0.49A7.768,7.768,0,0,0,164.2,4007.27Z" transform="translate(-145.75 -4005.5)"></path>
</g>
</defs>
</svg>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="display: none;">
<defs>
<g id="i_pinterest">
<path d="M191.98,4004.48a8.508,8.508,0,0,0-3.415,16.3,7.452,7.452,0,0,1,.148-1.95c0.164-.69,1.095-4.64,1.095-4.64a3.235,3.235,0,0,1-.272-1.34c0-1.26.731-2.21,1.64-2.21a1.145,1.145,0,0,1,1.148,1.28,18.34,18.34,0,0,1-.751,3.02,1.318,1.318,0,0,0,1.342,1.64c1.612,0,2.7-2.07,2.7-4.52,0-1.87-1.256-3.26-3.54-3.26a4.025,4.025,0,0,0-4.188,4.07,2.473,2.473,0,0,0,.561,1.67,0.406,0.406,0,0,1,.122.47c-0.041.16-.134,0.54-0.173,0.69a0.294,0.294,0,0,1-.426.21,3.283,3.283,0,0,1-1.742-3.25c0-2.42,2.038-5.32,6.08-5.32a5.085,5.085,0,0,1,5.385,4.88c0,3.33-1.855,5.83-4.59,5.83a2.449,2.449,0,0,1-2.078-1.06s-0.494,1.96-.6,2.34a7.166,7.166,0,0,1-.856,1.82,8.711,8.711,0,0,0,2.411.35A8.51,8.51,0,0,0,191.98,4004.48Z" transform="translate(-183.469 -4004.47)"></path>
</g>
</defs>
</svg>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="display: none;">
<defs>
<g id="i_facebook">
<path d="M19.284,21.151 L15.498,21.151 L15.498,11.216 L18.433,11.216 L18.653,8.347 L15.498,8.347 L15.498,7.447 L15.498,6.418 L15.498,6.106 C15.498,5.334 16.187,5.059 16.957,5.059 C17.726,5.059 18.551,5.298 18.551,5.298 L19.045,2.358 C19.045,2.358 17.993,2.002 15.498,2.002 C13.966,2.002 13.075,2.586 12.427,3.446 C11.811,4.258 11.789,5.569 11.789,6.418 L11.789,6.565 L11.789,7.447 L11.789,8.347 L9.810,8.347 L9.810,11.216 L11.789,11.216 L11.789,21.151 L1.835,21.151 C0.824,21.151 0.003,20.332 0.003,19.314 L0.003,1.826 C0.003,0.812 0.824,-0.011 1.835,-0.011 L19.284,-0.011 C20.295,-0.011 21.116,0.812 21.116,1.826 L21.116,19.314 C21.116,20.332 20.295,21.151 19.284,21.151 Z"></path>
</g>
</defs>
</svg>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="display: none;">
<defs>
<g id="i_tumblr">
<path d="M267.393,4017.64a1.37,1.37,0,0,1-1.525-1.53v-4.56h2.957v-2.64H265.88v-3.93h-2.322a0.131,0.131,0,0,0-.114.12,4.753,4.753,0,0,1-3.119,4.18v2.27h1.83v4.8c0,1.74,1.082,4.2,4.534,4.15a4.3,4.3,0,0,0,2.746-.91l-0.763-2.21A3.993,3.993,0,0,1,267.393,4017.64Z" transform="translate(-260.312 -4004.97)"></path>
</g>
</defs>
</svg>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="display: none;">
<defs>
<g id="i_email">
<path d="M291.988,4005.99v14h18v-14h-18Zm16.14,1.55-7.139,6-7.139-6h14.278Zm-14.64,10.9v-9.2l7.5,6.31,7.5-6.31v9.2h-15Z" transform="translate(-292 -4006)"></path>
</g>
</defs>
</svg>