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

資訊專欄INFORMATION COLUMN

div水平居中和垂直居中

fox_soyoung / 697人閱讀

摘要：在前端開發(fā)時，經(jīng)常會遇到需要居中的情形，居中分種情況，一個是水平居中，一個是垂直居中，總結(jié)一下用到的方法。

在前端開發(fā)時，經(jīng)常會遇到需要居中的情形，居中分2種情況，一個是水平居中，一個是垂直居中，總結(jié)一下用到的方法。

水平居中實(shí)現(xiàn) 
margin：0 auto

auto表示外邊距左右距離相同即可實(shí)現(xiàn)水平居中的效果

垂直居中實(shí)現(xiàn)

1、最常用到的一種方式是根據(jù)偏移量來實(shí)現(xiàn)

紅色方塊位于黑色方塊的中心位置，實(shí)現(xiàn)了垂直居中效果

left,top分別設(shè)置50%，紅色方塊的起始點(diǎn)位于垂直居中的位置，效果如下圖：

想要實(shí)現(xiàn)方塊內(nèi)部中心點(diǎn)垂直居中，還要加上偏移量，margin-top的值為紅色框heigh/2，margin-left的值為紅色框width/2。

2、讓div塊里的多行文字垂直居中，可以用table和table-cell來實(shí)現(xiàn)





   
垂直居中是布局中十分常見的效果之一垂直居中是布局中十分常見的效果之一垂直居中是布局中十分
       常見的效果之一垂直居中是布局中十分常見的效果之一

display: table使塊狀元素成為一個塊級表格，display: table-cell;子元素設(shè)置成表格單元格，vertical-align: middle;使表格內(nèi)容居中顯示，即可實(shí)現(xiàn)垂直居中的效果

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/113651.html

相關(guān)文章

  • 【第1期】聊聊css居中那點(diǎn)事

    摘要：前言居中是網(wǎng)頁布局中再常見不過的一種方式了，今天我們就來聊聊居中的那點(diǎn)事。我是水平居中的同樣是針對塊級元素才有效果。來看代碼我是水平居中的必須配合來使用來可以實(shí)現(xiàn)居中的效果。方法二我是垂直居中的注意此方法要考慮的兼容性問題。 前言：居中是網(wǎng)頁布局中再常見不過的一種方式了，今天我們就來聊聊css居中的那點(diǎn)事。 我們主要從這幾個方面來了解下居中： 水平居中 垂直居中 水平垂直居中 水平...

    劉永祥 評論0 收藏0

  • CSS-水平居中、垂直居中、水平垂直居中

    摘要：水平居中水平居中可分為行內(nèi)元素水平居中和塊級元素水平居中行內(nèi)元素水平居中這里行內(nèi)元素是指文本圖像按鈕超鏈接等，只需給父元素設(shè)置即可實(shí)現(xiàn)。 1、水平居中 水平居中可分為行內(nèi)元素水平居中和塊級元素水平居中 1.1 行內(nèi)元素水平居中 這里行內(nèi)元素是指文本text、圖像img、按鈕超鏈接等，只需給父元素設(shè)置text-align:center即可實(shí)現(xiàn)。 .center{ te...

    scwang90 評論0 收藏0

  • CSS-水平居中、垂直居中、水平垂直居中

    摘要：水平居中水平居中可分為行內(nèi)元素水平居中和塊級元素水平居中行內(nèi)元素水平居中這里行內(nèi)元素是指文本圖像按鈕超鏈接等，只需給父元素設(shè)置即可實(shí)現(xiàn)。 1、水平居中 水平居中可分為行內(nèi)元素水平居中和塊級元素水平居中 1.1 行內(nèi)元素水平居中 這里行內(nèi)元素是指文本text、圖像img、按鈕超鏈接等，只需給父元素設(shè)置text-align:center即可實(shí)現(xiàn)。 .center{ te...

    Lsnsh 評論0 收藏0

  • 【前端】這可能是你看過最全的css居中解決方案了~

    摘要：水平居中行內(nèi)元素解決方案適用元素文字，鏈接，及其其它或者類型元素，，部分代碼文字元素鏈接元素鏈接元素鏈接元素部分代碼解決方案將元素包裹在一個屬性為的父級元素中如設(shè)置這個父級元素屬性即可現(xiàn)在大家可以看到和中的子元素水平居中了水平居 1.水平居中：行內(nèi)元素解決方案 適用元素：文字，鏈接，及其其它inline或者inline-*類型元素（inline-block，inline-table，i...

    csRyan 評論0 收藏0

  • 【前端】這可能是你看過最全的css居中解決方案了~

    摘要：水平居中行內(nèi)元素解決方案適用元素文字，鏈接，及其其它或者類型元素，，部分代碼文字元素鏈接元素鏈接元素鏈接元素部分代碼解決方案將元素包裹在一個屬性為的父級元素中如設(shè)置這個父級元素屬性即可現(xiàn)在大家可以看到和中的子元素水平居中了水平居 1.水平居中：行內(nèi)元素解決方案 適用元素：文字，鏈接，及其其它inline或者inline-*類型元素（inline-block，inline-table，i...

    Simon 評論0 收藏0

  • CSS水平垂直居中總結(jié)

    摘要：垂直居中表格布局法為什么就能垂直居中拜讀了張鑫旭大神的文章行高指的是什么行高指的是文本行的基線間的距離。行內(nèi)框具有垂直居中性。 CSS水平居中、垂直居中、水平垂直居中方法總結(jié) 文字的水平居中: text-align:center; 單行文字的垂直居中： line-height:30px; height:30px; 讓有寬度的div水平居中： margin: 0 auto; width:...

    mist14 評論0 收藏0

發(fā)表評論

0條評論

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