国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

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

renweihub / 2422人閱讀

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

一、使用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;
}
居中

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

轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/111682.html

相關文章

  • 文本垂直居中幾個方法

    摘要:一使用適用于知道高度,一行文字讓和一樣高,可使文本垂直居中。在其他值不是的時候,和是可以根據上式算出的。同理和也是寬度需固定高度需固定居中 一、使用line-height(適用于知道高度,一行文字)讓line-height和height一樣高,可使文本垂直居中。二、設置上下padding三、通過table .testdiv { height: 87px; ...

    hzx 評論0 收藏0
  • web開發常用的幾居中形式

    摘要:一水平居中二水平垂直居中三針對文本內容的垂直居中一水平居中要居中的元素有屬性給元素添加代碼演示此外,和產生同樣效果的原因移步要居中的元素沒有屬性給添加屬性,并在的外面包一層且添加是讓塊狀里面的元素比如文字居中。 一 水平居中二 水平垂直居中三 針對文本內容的垂直居中 一 水平居中 要居中的元素A有width屬性 給元素A添加 margin:0,auto;(代碼演示) showImg(h...

    zqhxuyuan 評論0 收藏0
  • web開發常用的幾居中形式

    摘要:一水平居中二水平垂直居中三針對文本內容的垂直居中一水平居中要居中的元素有屬性給元素添加代碼演示此外,和產生同樣效果的原因移步要居中的元素沒有屬性給添加屬性,并在的外面包一層且添加是讓塊狀里面的元素比如文字居中。 一 水平居中二 水平垂直居中三 針對文本內容的垂直居中 一 水平居中 要居中的元素A有width屬性 給元素A添加 margin:0,auto;(代碼演示) showImg(h...

    brianway 評論0 收藏0
  • CSS行高(line-height)及文本垂直居中原理

    摘要:默認情況下一行文本的行高分為上間距,文本的高度,下間距,并且上間距是等于下間距的,所以文字默認在這一行中是垂直居中的。 在CSS中,line-height 屬性設置兩段段文本之間的距離,也就是行高,如果我們把一段文本的line-height設置為父容器的高度就可以實現文本垂直居中了,比如下面的例子: Document ...

    233jl 評論0 收藏0
  • 垂直居中的幾種實現方法

    摘要:結構效果如下優點不用受內容高度的限制,簡單實現垂直居中缺點不兼容方法二這個方法使用絕對定位的,把它的設置為,設置為負的高度。這意味著對象必須在中指定固定的高度。使用使塊級元素垂直居中是很簡單的。 方法一:把一些 div 的顯示方式設置為表格,因此我們可以使用表格的 vertical-align屬性。 結構效果如下:http://jsfiddle.net/chic/4uduzb3t/1/...

    sorra 評論0 收藏0

發表評論

0條評論

renweihub

|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<