1.line-height
html :
div.parent div.child
css :
.parent height 736px line-height @height2.display: table
html :
div.parent div.child
css :
.parent display table .child display table-cell vertical-align middle3.position
html :
div.parent div.child
css :
.parent position relative .child position absolute top 50% height 736px margin-top -(@height / 2)4.position
html :
div.parent div.child
css :
.parent position relative .child position absolute top 0 bottom 0 margin auto5.padding
html :
div.parent div.child
css :
.parent padding 5% 0 .child padding 10% 06.float
html :
div.parent div.floater div.child
css :
html, body height 100% .parent height @height .floater float left height @height / 2 width @height margin-bottom -50px .child clear both height 100px7. :before
要求display inline-block
html :
div.parent div.child
css :
.parent:before content "" display inline-block height 100% vertical-align middle .child display inline-block vertical-align middle8.translate
html :
div.parent div.child
css :
.parent height 100% position relative .child position absolute top @height / 2 transform translateY(-50%)9. display: box
html :
div.parent div.chlid
css :
.parent display -webkit-box -webkit-box-align center10.flex
html :
div.parent div.child
css :
.parent display flex align-items center
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/112162.html
摘要:包括水平居中,垂直居中,還有水平垂直居中。如果要再要細分,還要分浮動元素絕對定位的居中。樣式水平居中的元素圖片的水平居中圖片的居中,比較特殊。 2018.05.29 居中一個元素?你會想到啥?這里面的知識還真不少。包括水平居中,垂直居中,還有水平垂直居中。如果要再要細分,還要分浮動元素、絕對定位的居中。為了代碼簡介,沒有加背景和其他樣式,需要看效果的,可以加上背景。 目錄: 第一...
摘要:筆記整理之一水平垂直居中固定寬高一般使用負值進行居中不固定寬高一般使用和進行下面三種方案平常都很少被使用的到移動端一般使用方案在移動端都可以使用文本水平垂直居中文本垂直文本垂直居中移動端水平垂直居中垂直居中方案快級元素 筆記整理之一:水平垂直居中 PC固定寬高、一般使用maring負值進行居中PC不固定寬高、一般使用relative和left進行 下面三種方案平常都很少被使用的到 ...
摘要:水平居中水平居中可分為行內元素水平居中和塊級元素水平居中行內元素水平居中這里行內元素是指文本圖像按鈕超鏈接等,只需給父元素設置即可實現。 1、水平居中 水平居中可分為行內元素水平居中和塊級元素水平居中 1.1 行內元素水平居中 這里行內元素是指文本text、圖像img、按鈕超鏈接等,只需給父元素設置text-align:center即可實現。 .center{ te...
摘要:水平居中水平居中可分為行內元素水平居中和塊級元素水平居中行內元素水平居中這里行內元素是指文本圖像按鈕超鏈接等,只需給父元素設置即可實現。 1、水平居中 水平居中可分為行內元素水平居中和塊級元素水平居中 1.1 行內元素水平居中 這里行內元素是指文本text、圖像img、按鈕超鏈接等,只需給父元素設置text-align:center即可實現。 .center{ te...
閱讀 982·2023-04-26 01:47
閱讀 1672·2021-11-18 13:19
閱讀 2042·2019-08-30 15:44
閱讀 645·2019-08-30 15:44
閱讀 2291·2019-08-30 15:44
閱讀 1232·2019-08-30 14:06
閱讀 1420·2019-08-30 12:59
閱讀 1900·2019-08-29 12:49