成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

CSS/CSS3 實現(xiàn) 居中（水平&垂直）

genedna / 3071人閱讀

摘要：，水平居中行內(nèi)元素把行內(nèi)元素放在一個屬性塊元素中，然后設(shè)置父層元素屬性居中，水平居中塊狀元素設(shè)置外邊距，水平居中多個塊狀元素把塊狀元素屬性，然后設(shè)置父層元素屬性居中，水平居中多個塊狀元素布局實現(xiàn)把塊狀元素的父元素屬性和，如下設(shè)置，

1，水平居中：行內(nèi)元素

把行內(nèi)元素放在一個屬性塊（display：block）元素中，然后設(shè)置父層元素屬性居中：

.test {

text-align:center;

}

2，水平居中：塊狀元素

設(shè)置外邊距

.test {

margin: 100px auto;

}

3，水平居中：多個塊狀元素

把塊狀元素屬性（display：inline-block），然后設(shè)置父層元素屬性居中：

.test {

text-align:center;

}

4，水平居中：多個塊狀元素（flexbox布局實現(xiàn)）

把塊狀元素的父元素屬性 display:flex和justify-content:center，如下設(shè)置：

.test {

text-align:center;

}

5，垂直居中：單行的行內(nèi)元素

設(shè)置height和line-height屬性

.test {

height: 100px;
line-height:100px;

}

6，垂直居中：多行的行內(nèi)元素

給要居中的父元素設(shè)置display:table-cell和vertical-align:middle屬性

.test {

background: red;
width: 200px;
height: 200px;
/* 以下屬性垂直居中 */
display: table-cell;
vertical-align:middle;

}

7，垂直居中：已知高度的塊狀元素

給要居中的元素設(shè)置如下屬性

.test {

top: 50%;
margin-top: -50px;  /* margin-top值為自身高度的一半 */
position: absolute;
padding:0;

}

8，水平垂直居中：已知高度和寬度的元素

給要居中的元素設(shè)置如下屬性

（1）
.test {

position: absolute;
margin:auto;
left:0;
top:0;
right:0;
bottom:0;

}
（2）
.test{

position: absolute;
top: 50%;
left: 50%;
margin-top: -75px;  /* 設(shè)置margin-left / margin-top 為自身高度的一半 */
margin-left: -75px;

}

9，水平垂直居中：未知高度和寬度元素

給要居中的元素設(shè)置如下屬性

.test {

position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);  /* 使用css3的transform來實現(xiàn) */

}

10，水平垂直居中：可用flex

設(shè)置如下屬性

.test {

 display: flex;
justify-content:center;
align-items: center;
/* 注意這里需要設(shè)置高度來查看垂直居中效果 */
background: #AAA;
height: 300px;

}

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

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/54132.html

相關(guān)文章

  • CSS/CSS3 實現(xiàn) 居中（水平&垂直）

    摘要：，水平居中行內(nèi)元素把行內(nèi)元素放在一個屬性塊元素中，然后設(shè)置父層元素屬性居中，水平居中塊狀元素設(shè)置外邊距，水平居中多個塊狀元素把塊狀元素屬性，然后設(shè)置父層元素屬性居中，水平居中多個塊狀元素布局實現(xiàn)把塊狀元素的父元素屬性和，如下設(shè)置， 1，水平居中：行內(nèi)元素 把行內(nèi)元素放在一個屬性塊（display：block）元素中，然后設(shè)置父層元素屬性居中： .test { text-align:ce...

    levy9527 評論0 收藏0

  • css - 收藏集 - 掘金

    摘要：絕對底部前端掘金來自國外的設(shè)計達(dá)人，純，可以實現(xiàn)當(dāng)正文內(nèi)容很少時，底部位于窗口最下面。有效解決圖片使用單位邊角缺失的問題前端掘金起因在移動端使用布局時圖片也需要用單位。 CSS 絕對底部 - 前端 - 掘金來自國外的設(shè)計達(dá)人，純CSS，可以實現(xiàn): 當(dāng)正文內(nèi)容很少時，底部位于窗口最下面。當(dāng)改變窗口高度時，不會出現(xiàn)重疊問題。甚至，創(chuàng)造該CSS的人還專門成立一個網(wǎng)站介紹這個CSS底部布局方案...

    phpmatt 評論0 收藏0

  • 前端-CSS3&H5

    摘要：高度模型淺識為的簡寫，簡稱為塊級格式化上下文，為瀏覽器渲染某一區(qū)域的機制，中只有和中還增加了和。并非所有的布局都會在開發(fā)中使用，但是其中也會涉及一些知識點。然而在不同的純制作各種圖形純制作各種圖形多圖預(yù)警 一勞永逸的搞定 flex 布局 尋根溯源話布局 一切都始于這樣一個問題：怎樣通過 CSS 簡單而優(yōu)雅的實現(xiàn)水平、垂直同時居中。記得剛開始學(xué)習(xí) CSS 的時候，看到 float 屬性不...

    xiaolinbang 評論0 收藏0

發(fā)表評論

0條評論

閱讀需要支付1元查看
<