项目场景:
自定义按钮切换功能
问题描述:
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。