CSS實現元素水平居中

szysky 發布于2019-08-01 14:50 / 910人閱讀

摘要：實現元素水平居中元素主要分為塊級元素和行內元素，所以對元素進行水平居中也分這兩種情況來討論，另外塊級元素的實現比較復雜，將分情況討論。

CSS實現元素水平居中

元素主要分為塊級元素和行內元素，所以對元素進行水平居中也分這兩種情況來討論，另外塊級元素的實現比較復雜，將分情況討論。

一、行內元素

常用行內元素為a/img/input/span 等，標簽內的HTML文本也屬于此類。對于此類情況，水平居中是通過給父元素設置 text-align:center來實現的。
HTML結構：


  
    Hello World!!!

CSS樣式：

二、塊級元素

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

1.定寬塊級元素

滿足**定寬**和**塊狀**兩個條件的元素是可以通過設置**“左右margin”值為“auto”**來實現居中的。
HTML結構：


  
    Hello World!!!

CSS樣式：

2.不定寬塊級元素

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

加入 table 標簽

設置 display;inline 方法

設置 position:relative 和 left:50%;

2.1加入 table 標簽

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

第二步：為這個 table 設置“左右 margin:auto”（這個和定寬塊狀元素的方法一樣）。
HTML結構：

CSS樣式：

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

2.2設置 display;inline 方法

改變塊級元素的 dispaly 為 inline 類型，然后使用 text-align:center 來實現居中效果。
HTML結構：

CSS樣式：

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

2.3設置 position:relative 和 left:50%;

通過給父元素設置 float，然后給父元素設置 position:relative 和 left:50%，子元素設置 position:relative 和 left:-50% 來實現水平居中。
HTML結構：

CSS樣式：

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

三種方式各有利弊，根據實際情況相應選用。

GPU云服務器云服務器水平居中水平垂直居中水平居中布局 html的水平居中

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/49617.html

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

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

csRyan 2019-08-30 13:54 評論0 收藏0
【前端】這可能是你看過最全的css居中解決方案了~

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

Simon 2019-08-01 18:31 評論0 收藏0
如何居中一個元素（終結版）

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

Hydrogen 2019-08-29 16:56 評論0 收藏0
如何居中一個元素（終結版）

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

hlcc 2019-08-02 11:43 評論0 收藏0
如何居中一個元素（終結版）

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

Meils 2019-08-23 12:20 評論0 收藏0
CSS/CSS3 實現居中（水平&垂直）

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

genedna 2019-08-02 15:27 評論0 收藏0