css垂直居中的問題

時間 2019-12-01

標籤 css 垂直居中問題欄目 CSS 简体版

原文原文鏈接

第一父元素高度肯定的單行文本css

父元素高度肯定的單行文本的豎直居中的方法是經過設置父元素的 height 和 line-height 高度一致來實現的。(height: 該元素的高度，line-height: 顧名思義，行高（行間距），指在文本中，行與行之間的基線間的距離 )。html

line-height 與 font-size 的計算值之差，在 CSS 中成爲「行間距」。分爲兩半，分別加到一個文本行內容的頂部和底部。chrome

這種文字行高與塊高一致帶來了一個弊端：當文字內容的長度大於塊的寬時，就有內容脫離了塊。瀏覽器

以下代碼：app

<div class="container">
    hi,imooc!
</div>

css代碼：spa

<style>
.container{
    height:100px;
    line-height:100px;
    background:#999;
}
</style>

第二 父元素高度肯定的多行文本

方法一：使用插入 table (包括tbody、tr、td)標籤，同時設置 vertical-align：middle。firefox

css 中有一個用於豎直居中的屬性 vertical-align，在父元素設置此樣式時，會對inline-block類型的子元素都有用。下面看一下例子：code

html代碼：htm

<body>
<table><tbody><tr><td class="wrap">
<div>
    <p>看我是否能夠居中。</p>
</div>
</td></tr></tbody></table>
</body>

css代碼：ip

table td{height:500px;background:#ccc}

由於 td 標籤默認狀況下就默認設置了 vertical-align 爲 middle，因此咱們不須要顯式地設置了。

方法二：

在 chrome、firefox 及 IE8 以上的瀏覽器下能夠設置塊級元素的display 爲 table-cell（設置爲表格單元顯示），激活 vertical-align 屬性，但注意 IE六、7 並不支持這個樣式, 兼容性比較差。

html代碼：

<div class="container">
    <div>
        <p>看我是否能夠居中。</p>
        <p>看我是否能夠居中。</p>
        <p>看我是否能夠居中。</p>
    </div>
</div>

css代碼：

<style>
.container{
    height:300px;
    background:#ccc;
    display:table-cell;/*IE8以上及Chrome、Firefox*/
    vertical-align:middle;/*IE8以上及Chrome、Firefox*/
}
</style>

隱性改變display類型

有一個有趣的現象就是當爲元素（不論以前是什麼類型元素，display:none 除外）設置如下 2 個句之一：

1. position : absolute

2. float : left 或 float:right

簡單來講，只要html代碼中出現以上兩句之一，元素的display顯示類型就會自動變爲以 display:inline-block（塊狀元素）的方式顯示，固然就能夠設置元素的 width 和 height 了，且默認寬度不佔滿父元素。

以下面的代碼，小夥伴們都知道 a 標籤是行內元素，因此設置它的 width 是沒有效果的，可是設置爲 position:absolute 之後，就能夠了。

<div class="container">
    <a href="#" title="">進入課程請單擊這裏</a>
</div>

css代碼

<style>
.container a{
    position:absolute;
    width:200px;
    background:#ccc;
}
</style>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。