我是多行文字
我是多行文字
我是多行文字
摘要:二內邊距法另一種方法和行高法很相似,它同樣適合一行或幾行文字垂直居中,原理就是利用將內容垂直居中,比如這段代碼的效果和法差不多。
一、行高(line-height)法
如果要垂直居中的只有一行或幾個文字,那它的制作最為簡單,只要讓文字的行高和容器的高度相同即可,比如:
p { height:30px; line-height:30px; width:100px; overflow:hidden; }
這段代碼可以達到讓文字在段落中垂直居中的效果。
二、內邊距(padding)法另一種方法和行高法很相似,它同樣適合一行或幾行文字垂直居中,原理就是利用padding將內容垂直居中,比如:
p { padding:20px 0; }
這段代碼的效果和line-height法差不多。
三、模擬表格法將容器設置為display:table,然后將子元素也就是要垂直居中顯示的元素設置為display:table-cell,然后加上vertical-align:middle來實現。
html結構如下:
測試垂直居中效果測試垂直居中效果
測試垂直居中效果測試垂直居中效果
css代碼:
#wrapper {display:table;width:300px;height:300px;background:#000;margin:0 auto;color:red;} #cell{display:table-cell; vertical-align:middle;}
實現如圖所示:
遺憾的是IE7及以下不支持。
四、CSS3的transform來實現css代碼如下:
.center-vertical{ position: relative; top:50%; transform:translateY(-50%); }.center-horizontal{ position: relative; left:50%; transform:translateX(-50%); }五:css3的box方法實現水平垂直居中
html代碼:
我是多行文字
我是多行文字
我是多行文字
css代碼:
.center { width: 300px; height: 200px; padding: 10px; border: 1px solid #ccc; background:#000; color:#fff; margin: 20px auto; display: -webkit-box; -webkit-box-orient: horizontal; -webkit-box-pack: center; -webkit-box-align: center; display: -moz-box; -moz-box-orient: horizontal; -moz-box-pack: center; -moz-box-align: center; display: -o-box; -o-box-orient: horizontal; -o-box-pack: center; -o-box-align: center; display: -ms-box; -ms-box-orient: horizontal; -ms-box-pack: center; -ms-box-align: center; display: box; box-orient: horizontal; box-pack: center; box-align: center; }
結果如圖:
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/111140.html
摘要:清單一些說明注意文檔的書寫順序,先寫兩側欄,再寫主面板,更換后則側欄會被擠到下一列圣杯布局和雙飛翼布局都會用到。可以通過設置的屬性或使用雙飛翼布局避免問題。雙飛翼布局不用設置相對布局,以及對應的和值。 本文首發于知乎專欄:前端指南 CSS布局 布局是CSS中一個重要部分,本文總結了CSS布局中的常用技巧,包括常用的水平居中、垂直居中方法,以及單列布局、多列布局的多種實現方式(包括傳統的...
摘要:實現垂直居中的幾種方法分場景介紹包裹行內元素效果圖包裹行內塊級元素效果圖結構效果圖注容器若設置了再設置的無效,即會自動填滿的高寬若未設置,則自適應的實際寬高 實現垂直居中的幾種方法(分場景介紹) line-height (包裹行內元素) 123456788 12345555 .wrap { height: 100px; line-height:...
摘要:以下是在自己實習生面試的時候遇到的一個問題,事后自己也去總結了一下。 以下是在自己實習生面試的時候遇到的一個問題,事后自己也去總結了一下。問題描述如下:一個外層div里面嵌套兩個內部div,外層div高度固定(假設未知),內層上面的div高度固定,如何讓下面的div實現撐滿外層的div高度?看到過網上有類似的問題,但是大部分都是假設外層高度為100%或者是已知的,而我遇到的是外層高度雖...
閱讀 667·2021-10-09 09:41
閱讀 650·2019-08-30 15:53
閱讀 1078·2019-08-30 15:53
閱讀 1212·2019-08-30 11:01
閱讀 1570·2019-08-29 17:31
閱讀 992·2019-08-29 14:05
閱讀 1718·2019-08-29 12:49
閱讀 415·2019-08-28 18:17