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

它会＆＃34;水平＆＃34;与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>

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

1 个答案: