在 UL 中将 SVG 图标垂直对齐到中心

【问题标题】：Vertically align SVG icons to center in UL在 UL 中将 SVG 图标垂直对齐到中心
【发布时间】：2019-01-06 00:51:48
【问题描述】：

我为此创建了一个示例代码，这样会更有意义。我想将所有图标垂直居中对齐。图标有不同的大小。我添加了用于调试目的的边框，因此我们可以准确地看到它是否垂直居中。

我知道一种为 LI 标记提供固定宽度的方法，然后通过设置绝对位置来垂直对齐 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>

【问题讨论】：

    标签： html css flexbox vertical-alignment


    【解决方案1】：

    display:flex 在父项 li 上使用 align-items 垂直对齐 SVG 居中。

    .wrapper ul.socialmedia-menu li{
    显示：-webkit-flex；
    显示：弹性；
    -webkit-align-items：居中；
    对齐项目：居中；
    -webkit-justify-content：居中；
    对齐内容：居中；
    }

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

    【讨论】：

      猜你喜欢
      • 2012-08-15
      • 2016-08-13
      • 2013-07-23
      • 2018-03-16
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多
      热门标签
      Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode