讓文本垂直居中的幾個方法

hzx 發布于2019-08-01 15:52 / 434人閱讀

摘要：一使用適用于知道高度，一行文字讓和一樣高，可使文本垂直居中。在其他值不是的時候，和是可以根據上式算出的。同理和也是寬度需固定高度需固定居中

一、使用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 讓文本居中垂直居中實現垂直居中水平垂直居中

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/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