让文本垂直居中的几个方法

hzx 发布于2019-08-01 15:52 / 371人阅读

摘要：一使用适用于知道高度，一行文字让和一样高，可使文本垂直居中。在其他值不是的时候，和是可以根据上式算出的。同理和也是宽度需固定高度需固定居中

一、使用line-height（适用于知道高度，一行文字）
让line-height和height一样高，可使文本垂直居中。
二、设置上下padding
三、通过table

   .testdiv {
        height: 87px;
        display: table;
    }
    
    .innerdiv {
        width: 20px;
        height: 100%;
        line-height: 20px;
        padding: 0 4px;
        border-right: 1px solid #F4F8FB;
        font-size: 14px;
        text-align: center;
        background: #F4F8FB;
        display: table-cell;
        vertical-align: middle;
    }
    
        服装

三、使用 vertical-align和空标签（可用于高度未知）

   .testdiv {
        height: 87px;
    }
    
    h4 {
        width: 20px;
        height: 100%;
        float: left;
        line-height: 20px;
        padding: 0 4px;
        border-right: 1px solid #F4F8FB;
        font-size: 14px;
        text-align: center;
        background: #F4F8FB;
    }
    
    h4 a {
        display: inline-block;
        vertical-align: middle;
        color: #1A397C;
    }
    
    h4 i {
        height: 100%;
        width: 0;
        display: inline-block;
        vertical-align: middle;
        color: #1A397C;
    }
    
        服装

四、absolute+margin-top方法（需知道内部div高度）

   .testdiv {
        height: 87px;
        position: relative;
        background: #F4F8FB;
    }
    
    .innerdiv {
        width: 20px;
        height: 40px;
        line-height: 20px;
        padding: 0 4px;
        border: 1px solid #000;
        font-size: 14px;
        text-align: center;
        position: absolute;
        top: 50%;
        margin-top: -21px;
    }
    
        居中

五、absolute+transform方法（可适用于内部div高度未定的情况，因为translate属性值为百分比时是相对元素自身的content+padding+border来计算的）

.testdiv {
    height: 87px;
    position: relative;
    background: #F4F8FB;
 }

.innerdiv {
    width: 20px;
    line-height: 20px;
    padding: 0 4px;
    border: 1px solid #000;
    font-size: 14px;
    text-align: center;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

    居中

六、使用flex布局

.testdiv {
    height: 87px;
    background: #F4F8FB;
    justify-content: center; /*子元素水平居中*/
    align-items: center; /*子元素垂直居中*/
    display: -webkit-flex;
}

.innerdiv {
    width: 20px;
    line-height: 20px;
    padding: 4px;
    border: 1px solid #000;
    font-size: 14px;
    text-align: center;
}

    居中

七、aboslute（原理：‘top’ + ‘margin-top’ + ‘border-top-width’ + ‘padding-top’ + ‘height’ + ‘padding-bottom’ + ‘border-bottom-width’ + ‘margin-bottom’ + ‘bottom’ = 包含块的高度。
在其他值不是auto的时候，margin-top和margin-bottom是可以根据上式算出的。同理margin-left和margin-right也是）

.testdiv {
    height: 87px;
    background: #F4F8FB;
    position: relative;
}    
.innerdiv {
    width: 20px;/*宽度需固定*/
    line-height: 20px;
    padding: 4px;
    border: 1px solid #000;
    font-size: 14px;
    text-align: center;
    height: 40px;/*高度需固定*/
    margin: auto;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

    居中

GPU云服务器云服务器 html 让文本居中垂直居中实现垂直居中水平垂直居中

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/50175.html

让文本垂直居中的几个方法

摘要：一使用适用于知道高度，一行文字让和一样高，可使文本垂直居中。在其他值不是的时候，和是可以根据上式算出的。同理和也是宽度需固定高度需固定居中一、使用line-height（适用于知道高度，一行文字）让line-height和height一样高，可使文本垂直居中。二、设置上下padding三、通过table .testdiv { height: 87px; ...

renweihub 2019-08-29 11:29 评论0 收藏0
web开发常用的几种居中形式

摘要：一水平居中二水平垂直居中三针对文本内容的垂直居中一水平居中要居中的元素有属性给元素添加代码演示此外，和产生同样效果的原因移步要居中的元素没有属性给添加属性，并在的外面包一层且添加是让块状里面的元素比如文字居中。一水平居中二水平垂直居中三针对文本内容的垂直居中一水平居中要居中的元素A有width属性给元素A添加 margin：0,auto；(代码演示) showImg(h...

zqhxuyuan 2019-08-21 16:23 评论0 收藏0
web开发常用的几种居中形式

摘要：一水平居中二水平垂直居中三针对文本内容的垂直居中一水平居中要居中的元素有属性给元素添加代码演示此外，和产生同样效果的原因移步要居中的元素没有属性给添加属性，并在的外面包一层且添加是让块状里面的元素比如文字居中。一水平居中二水平垂直居中三针对文本内容的垂直居中一水平居中要居中的元素A有width属性给元素A添加 margin：0,auto；(代码演示) showImg(h...

brianway 2019-08-29 13:23 评论0 收藏0
CSS行高（line-height）及文本垂直居中原理

摘要：默认情况下一行文本的行高分为上间距，文本的高度，下间距，并且上间距是等于下间距的，所以文字默认在这一行中是垂直居中的。在CSS中，line-height 属性设置两段段文本之间的距离，也就是行高，如果我们把一段文本的line-height设置为父容器的高度就可以实现文本垂直居中了，比如下面的例子： Document ...

233jl 2019-08-30 13:00 评论0 收藏0
垂直居中的几种实现方法？

摘要：结构效果如下优点不用受内容高度的限制，简单实现垂直居中缺点不兼容方法二这个方法使用绝对定位的，把它的设置为，设置为负的高度。这意味着对象必须在中指定固定的高度。使用使块级元素垂直居中是很简单的。方法一：把一些 div 的显示方式设置为表格，因此我们可以使用表格的 vertical-align属性。结构效果如下：http://jsfiddle.net/chic/4uduzb3t/1/...

sorra 2019-08-28 17:57 评论0 收藏0