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

資訊專欄INFORMATION COLUMN

CSS實現(xiàn)元素水平居中

szysky / 903人閱讀

摘要：實現(xiàn)元素水平居中元素主要分為塊級元素和行內(nèi)元素，所以對元素進(jìn)行水平居中也分這兩種情況來討論，另外塊級元素的實現(xiàn)比較復(fù)雜，將分情況討論。

CSS實現(xiàn)元素水平居中

元素主要分為塊級元素和行內(nèi)元素，所以對元素進(jìn)行水平居中也分這兩種情況來討論，另外塊級元素的實現(xiàn)比較復(fù)雜，將分情況討論。

一、行內(nèi)元素

常用行內(nèi)元素為a/img/input/span 等，標(biāo)簽內(nèi)的HTML文本也屬于此類。對于此類情況，水平居中是通過給父元素設(shè)置 text-align:center來實現(xiàn)的。
HTML結(jié)構(gòu)：


  

    Hello World!!!

CSS樣式：

二、塊級元素

常用塊級元素為div/table/ul/dl/form/h1/p等。根據(jù)應(yīng)用場景不同又分為定寬塊級與不定寬塊級兩種情況，分別討論。

1.定寬塊級元素

滿足**定寬**和**塊狀**兩個條件的元素是可以通過設(shè)置**“左右margin”值為“auto”**來實現(xiàn)居中的。
HTML結(jié)構(gòu)：


  

    Hello World!!!

CSS樣式：

2.不定寬塊級元素

我們經(jīng)常會遇到不定寬度塊級元素的使用，如分頁導(dǎo)航，因為分頁的數(shù)目不定，所以不能用寬度限制住。此時對元素進(jìn)行水平居中主要有三種方式：

加入 table 標(biāo)簽

設(shè)置 display;inline 方法

設(shè)置 position:relative 和 left:50%;

2.1加入 table 標(biāo)簽

第一步：為需要設(shè)置的居中的元素外面加入一個 table 標(biāo)簽 ( 包括 、、 )。

第二步：為這個 table 設(shè)置“左右 margin:auto”（這個和定寬塊狀元素的方法一樣）。
HTML結(jié)構(gòu)：

CSS樣式：

**這種方法的缺點是增加了無語義的HTML標(biāo)簽，增加了嵌套深度

2.2設(shè)置 display;inline 方法

改變塊級元素的 dispaly 為 inline 類型，然后使用 text-align:center 來實現(xiàn)居中效果。
HTML結(jié)構(gòu)：

CSS樣式：

這種方法的缺點是將塊級元素的display設(shè)置為inline，于是少了很多功能，比如盒子模型

2.3設(shè)置 position:relative 和 left:50%;

通過給父元素設(shè)置 float，然后給父元素設(shè)置 position:relative 和 left:50%，子元素設(shè)置 position:relative 和 left:-50% 來實現(xiàn)水平居中。
HTML結(jié)構(gòu)：

CSS樣式：

這種方法可以保留塊狀元素仍以 display:block 的形式顯示，優(yōu)點不添加無語議表標(biāo)簽，不增加嵌套深度，但它的缺點是設(shè)置了 position:relative，帶來了一定的副作用。

三種方式各有利弊，根據(jù)實際情況相應(yīng)選用。

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

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

相關(guān)文章

  • 【前端】這可能是你看過最全的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

  • 如何居中一個元素（終結(jié)版）

    摘要：源代碼演示利用將要水平排列的塊狀元素設(shè)為，然后在父級元素上設(shè)置，達(dá)到與上面的行內(nèi)元素的水平居中一樣的效果。 前言 本文主要介紹水平居中，垂直居中，還有水平垂直居中各種辦法，思維導(dǎo)圖如下： showImg(https://segmentfault.com/img/bVblwhg?w=1334&h=563); 如需本文的思維導(dǎo)圖，請猛戳Github個人博客 一、水平居中 1.行內(nèi)元素水平居...

    Hydrogen 評論0 收藏0

  • 如何居中一個元素（終結(jié)版）

    摘要：源代碼演示利用將要水平排列的塊狀元素設(shè)為，然后在父級元素上設(shè)置，達(dá)到與上面的行內(nèi)元素的水平居中一樣的效果。 前言 本文主要介紹水平居中，垂直居中，還有水平垂直居中各種辦法，思維導(dǎo)圖如下： showImg(https://segmentfault.com/img/bVblwhg?w=1334&h=563); 如需本文的思維導(dǎo)圖，請猛戳Github個人博客 一、水平居中 1.行內(nèi)元素水平居...

    hlcc 評論0 收藏0

  • 如何居中一個元素（終結(jié)版）

    摘要：源代碼演示利用將要水平排列的塊狀元素設(shè)為，然后在父級元素上設(shè)置，達(dá)到與上面的行內(nèi)元素的水平居中一樣的效果。 前言 本文主要介紹水平居中，垂直居中，還有水平垂直居中各種辦法，思維導(dǎo)圖如下： showImg(https://segmentfault.com/img/bVblwhg?w=1334&h=563); 如需本文的思維導(dǎo)圖，請猛戳Github個人博客 一、水平居中 1.行內(nèi)元素水平居...

    Meils 評論0 收藏0

  • 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...

    genedna 評論0 收藏0

發(fā)表評論

0條評論

szysky

男|高級講師

TA的文章

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