css⽂字垂直居中问题CSS ⽂字垂直居中问题
问题：在 div 中⽂字居中问题：当使⽤ line-height：100%%; 时，⽂字没有居中，如下：html: <div id="header_logo_des"></div>
CSS: #header_logo_des{
width: 100%;
height: 100%;
font-size: 28px;
text-align:center;
line-height: 100%;  /*设置line-height与⽗级元素的height相等，不能使⽤%；*/
}
但结果如下：
原因：
line-height 属性设置⾏间的距离（⾏⾼）
1. 不能为负值；
2. 最好设置为具体像素值，如：line-height: 60px;
3. 在⼤多数浏览器中默认⾏⾼⼤约是 110% 到 120%;
解决办法：
1. 使⽤像素值:
div中的div居中
eg:  line-height: 60px;  // 60px，是当前 div 的⾼度
2. 使⽤ %：
eg: line-height: 200%;  // 调⾼百分⽐
3. 不再使⽤ div 直接写⽂字，可使⽤其他内联标签包含⽂字，eg: <span>
HTML： <span>岁⽉静好</span>
CSS:  span{
font-size: 28px;
display: block;  //内联元素--块级化
text-align: center;  //⽂字⽔平居中
line-height: 200%;  //⽂字垂直居中
}
4. 垂直居中 vertical-align: middle;  常⽤于图⽚的垂直居中
注意： vertical-align: middle;  //不要放在div中，因为<div>、<span>这样的元素是没有valign特性的
5. flex：⽔平垂直居中
html: <div id="des">
<span>岁⽉静好</span>
</div>
CSS: #des{
width: 100px;
height: 100px;
display: flex;
border: 2px solid #ffcfd3;
background-color: #bacaee;
}
#des span{
display: flex;
flex: 1;
justify-content: center;/*⽔平轴居中*/
align-items: center;/*垂直轴居中*/
}

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。