css - 如何从多边形中心而不是底部制作 SVG 级别？

Question

我有一个相当简单的 svg 下拉按钮图标。我想将它与下拉按钮中的文本对齐，以便文本的中心与 svg 多边形的中心对齐。

到目前为止，它与多边形的底部齐平。

SVG:

<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='#FFFFF'>
    <polygon
            opacity="0.5"
            points='0,0 100,0 50,50'
    />
</svg>

它是为按钮元素实现的(React 样式):

background: `url(${require("./assets/icons/select_downarrow.svg")}) no-repeat`,
backgroundSize: "10px",
backgroundPosition: "calc(100% - 15px) center",

它将与 SVG 箭头的最底部“对齐”。我希望它与多边形的中心齐平，这可以从 SVG 元素本身来完成，还是必须通过样式来完成？

Answer 1

一种简单的方法是将文本的 line-height 设置为与图像相同的高度。只要您的文本不需要换行，这就很好用。

button {
  background-color: #eeeeff;
}

svg {
  display: block;
  float: left;
  background-color: #ffffee;
}

span {
  line-height: 100px;
}

<button>

  <svg width="100" height="100" fill="#FFFFF">
    <polygon opacity="0.5" points="0,0 100,0 50,50" />
  </svg>
  
  <span>Some text here</span>

</button>