css - 带有 SVG 的按钮文本没有垂直居中

Question

我也在努力使文本在按钮中垂直居中，同时使用 SVG。但是，如果我删除了 SVG，它的居中就很好。如何保持 SVG 的大小并且仍然垂直居中文本？

element.style {
}
button {
    margin-right: 6px;
    margin-bottom: 6px;
}

.imi-btn {
    background-color: red;
    border: 1px solid transparent;
    padding: 0 15px;
    height: 32px;
    color: #fff;
    border-radius: 4px;
    display: flex;
    cursor: pointer;
    transition: 0.5s;
    position: relative;
    outline: none;
}

.imi-icon {
    /* vertical-align: -0.05em; */
    cursor: pointer;
    display: inline-flex;
    margin-right: 5px;
    width: 17px;
    height: 17px;
}

<button  type="primary"  class="imi-btn imi-btn-primary">
    <designer-imi-icon>
      <i  class="imi-icon">
        <svg height="100%" viewBox="0 0 24 24" width="100%" xmlns="http://www.w3.org/2000/svg" fill="white"><path  d="M20 3h-1V1h-2v2H7V1H5v2H4c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 18H4V8h16v13z"></path><path  d="M0 0h24v24H0z" fill="none"></path></svg>
      </i>
    </designer-imi-icon> 
    My Event
  </button>

标签： css

Answer 1

包装My Event成 a <span>，然后给它一个类名并使用margin: auto 0;

工作，至少对我来说：https ://codepen.io/TimmSkiller102/pen/dybmomq