111

時間 2019-11-29

原文原文鏈接

垂直居中-父元素高度肯定的多行文本（方法一）

父元素高度肯定的多行文本、圖片等的豎直居中的方法有兩種：css

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

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

html代碼：瀏覽器

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

css代碼：學習

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

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

!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!firefox

垂直居中-父元素高度肯定的多行文本（方法二）

除了上一節講到的插入table標籤，能夠使父元素高度肯定的多行文本垂直居中以外，本節介紹另一種實現這種效果的方法。但這種方法兼容性比較差，只是提供你們學習參考。code

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

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>

這種方法的好處是不用添加多餘的無心義的標籤，但缺點也很明顯，它的兼容性不是很好，不兼容 IE六、7並且這樣修改display的block變成了table-cell，破壞了原有的塊狀元素的性質

1. 111
2. UVA 111
3. 111：TemplateView講解
4. 111 CompletableFuture 詳解
5. 編輯器111
6. UVA 111-History Granding
7. 測試111
8. ConnectionRefusedError: [Errno 111] Connection refused
9. 111. Minimum Depth of Binary Tree
10. 111.minimum depth of binary tree
更多相關文章...
• R JSON 文件 - R 語言教程
• R XML 文件 - R 語言教程

相關標籤/搜索

每日一句

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