div设置行高后内容未垂直居中

项目场景：

自定义按钮切换功能

---

问题描述：

div中设置line-height=height后文字未垂直居中

<div
          v-for="(item, index) in btns"
          :key="index"
          @click="switchTo(index, item)"
          :class="['log-btn', item.active ? 'active-btn' : 'await-btn']"
        >
          {{ item.name }}
</div>
<sytle>
 .log-btn {
    display: inline-block;
    padding: 0px;
    border: none;
    border-top: 1px solid #d9d9d9;
    border-right: 1px solid #d9d9d9;
    border-bottom: 1px solid #d9d9d9;
    line-height: 26px;
    height:26px;
    box-sizing: border-box;
  }
</style>

---

原因分析：

box-sizing: border-box属性是为了防止padding和border撑大盒子高度，现在真实的height=原来的26px-2px(border-top 1px ,border-bottom 1px )。

---

解决方案：

line-height设置为24px。