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. 使用像素值:

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;/*垂直轴居中*/

}

巴特西

css 文字垂直居中问题

CSS 文字垂直居中问题

最新文章

热门文章