SVG的按钮文本未垂直居中

时间：2019-09-09 18:10:30

标签： css

在使用SVG的同时，我也在努力使文本在按钮中垂直居中。 但是，如果我删除SVG，则其居中。如何保持SVG的大小并仍使文本垂直居中？

enter image description here 

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>

2 个答案:

答案 0 :(得分：0)

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

至少对我来说有用：https://codepen.io/TimmSkiller102/pen/dybmomq

答案 1 :(得分：0)

在按钮上添加display:inline-flex;和align-items:center可解决此问题。

element.style {
}
button {
    margin-right: 6px;
    margin-bottom: 6px;
    display:inline-flex;
    align-items:center;
}

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

相关问题
最新问题