css - 移动端页面元素高度等于行高，文字却没有垂直居中，是什么情况？

问题描述

问 题

如题，元素内有文字，元素设置了高度和行高相等，却没有垂直居中?请问是啥子情况？
如下图：

css设置是这样的：

.Mail_list .list_block .bottom dd{
    float: right;
    width: 26%;
    height: 20px;
    line-height: 20px;
    text-align: center;
    border: 1px solid #ff6c00;
    color: #ff6c00;
    border-radius: 3px;
    -webkit-border-radius: 3px;
    font-size: 14px;
    margin-right: 5%;
}

解决方案

应该是你设置了该 dd 的 box-sizing: border-box 导致的，因为当你修改默认盒模型为 border-box时，你设置的 height 就默认包含了 内容高度 和 边框高度(2px), 所以这里你设置 height:20px, 那么你的内容高度就只剩 18px 了，所以你再设置 line-height:20px 是超出内容高度的，如果想要垂直居中，有3种方法：

1. 还原默认盒模型： 即设置 `box-sizing: content-box`
2. 移除高度设置：即删除 `height: 20px`
3. 修改行高：设置 `line-height: 18px`

这篇关于css - 移动端页面元素高度等于行高，文字却没有垂直居中，是什么情况？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！