CSS樣式設置

水平居中設置-行內元素

水平居中css

若是被設置元素爲文本、圖片等行內元素時,水平居中是經過給父元素設置 text-align:center來實現的。以下代碼:
html代碼:html

<body> <div class="txtCenter">我是文本,哈哈,我想要在父容器中水平居中顯示。</div> </body>

css代碼:chrome

<style> div.txtCenter{ text-align:center; } </style>
水平居中設置-塊狀元素

當被設置元素爲塊狀元素時用text-align:center就不起做用了,這時也分兩種狀況:定寬塊狀元素和不定寬塊狀元素。瀏覽器

定寬塊狀元素

知足定寬和塊狀兩個條件的元素是能夠經過設置「左右margin」值爲「auto」來實現居中的。設置 div 這個塊狀元素水平居中:spa

html代碼:firefox

<body> <div>我是定寬塊狀元素,哈哈,我要水平居中顯示。</div> </body>

css代碼:code

<style> div{ border:1px solid red;/*爲了顯示居中效果明顯爲 div 設置了邊框*/ width:500px;/*定寬*/ margin:20px auto;/* margin-left 與 margin-right 設置爲 auto */ } </style>

也能夠寫成:htm

margin-left:auto; margin-right:auto;
  • 注意:
    元素的「上下 margin」 是能夠隨意設置的。

水平居中總結-不定寬塊狀元素方法

在實際工做中咱們會遇到須要爲「不定寬度的塊狀元素」設置居中,好比網頁上的分頁導航,由於分頁的數量是不肯定的,因此咱們不能經過設置寬度來限制它的彈性。圖片

不定寬度的塊狀元素有三種方法居中(這三種方法目前使用的都比多):it

  • 加入 table 標籤
    1.第一步:爲須要設置的居中的元素外面加入一個table 標籤 ( 包括 <tbody><tr><td> )。
    2.第二步:爲這個 table設置「左右margin居中」(這個和定寬塊狀元素的方法同樣)。

舉例以下:

html代碼:

<div> <table> <tbody> <tr><td> <ul> <li><a href="#">1</a></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> </ul> </td></tr> </tbody> </table> </div>

css代碼:

<style> table{ margin:0 auto; } ul{list-style:none;margin:0;padding:0;} li{float:left;display:inline;margin-right:8px;} </style>
  • 設置 display:inline 方法

改變塊級元素的 displayinline 類型,而後使用 text-align:center 來實現居中效果。以下例子:

html代碼:

<body> <div class="container"> <ul> <li><a href="#">1</a></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> </ul> </div> </body>

css代碼:

<style> .container{ text-align:center; } .container ul{ list-style:none; margin:0; padding:0; display:inline; } .container li{ margin-right:8px; display:inline; } </style>
  • 注意
    這種方法相比第一種方法的優點是不用增長無語義標籤,簡化了標籤的嵌套深度,但也存在着一些問題:它將塊狀元素的 display類型改成 inline,變成了行內元素,因此少了一些功能,好比設定長度值。

  • 設置 position:relativeleft:50%;

經過給父元素設置 float,而後給父元素設置position:relativeleft:50%,子元素設置position:relativeleft:-50%來實現水平居中。

代碼以下:

<body> <div class="container"> <ul> <li><a href="#">1</a></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> </ul> </div> </body>

css代碼:

<style> .container{ float:left; position:relative; left:50% } .container ul{ list-style:none; margin:0; padding:0; position:relative; left:-50%; } .container li{float:left;display:inline;margin-right:8px;} </style>

這種方法能夠保留塊狀元素仍以display:block的形式顯示,優勢不添加無語議表標籤,不增長嵌套深度,但它的缺點是設置了position:relative,帶來了必定的反作用。

這三種方法使用得都很是普遍,各有優缺點,具體選用哪一種方法,能夠視具體狀況而定。

垂直居中

父元素高度肯定的單行文本

父元素高度肯定的單行文本的豎直居中的方法是經過設置父元素的heightline-height 高度一致來實現的。以下代碼:

<div class="container"> hi,imooc! </div>

css代碼:

<style> .container{ height:100px; line-height:100px; background:#999; } </style>

父元素高度肯定的多行文本、圖片、塊狀元素

豎直居中的方法有兩種:

  • 方法一:使用插入 table (包括tbodytrtd)標籤,同時設置 vertical-align:middle
    說到豎直居中,css中有一個用於豎直居中的屬性vertical-align,但這個樣式只有在父元素爲 tdth 時,纔會生效。因此又要插入 table 標籤了。下面看一下例子:
    html代碼:
    <body> <table><tbody><tr><td class="wrap"> <div> <p>看我是否能夠居中。</p> <p>看我是否能夠居中。</p> <p>看我是否能夠居中。</p> <p>看我是否能夠居中。</p> <p>看我是否能夠居中。</p> </div> </td></tr></tbody></table> </body>

    css代碼:

    table td{height:500px;background:#ccc}

    由於 td 標籤默認狀況下就默認設置了vertical-alignmiddle,因此咱們不須要顯式地設置了。

  • 方法二:在 chromefirefox及IE8以上的瀏覽器下能夠設置塊級元素的 displaytable-cell,激活vertical-align 屬性,但注意 IE六、7 並不支持這個樣式。

html代碼:

<div class="container"> <div> <p>看我是否能夠居中。</p> <p>看我是否能夠居中。</p> <p>看我是否能夠居中。</p> <p>看我是否能夠居中。</p> <p>看我是否能夠居中。</p> </div> </div>

css代碼:

<style> .container{ height:300px; background:#ccc; display:table-cell;/*IE8以上及Chrome、Firefox*/ vertical-align:middle;/*IE8以上及Chrome、Firefox*/ } </style>

這種方法的好處是不用添加多餘的無心義的標籤,但缺點也很明顯,它的兼容性不是很好,不兼容 IE六、7。

隱性改變display類型

有一個有趣的現象就是當爲元素(不論以前是什麼類型元素,display:none 除外)設置如下 2 個句之一:

position : absolute float : left  float:right

元素會自動變爲以display:inline-block的方式顯示,固然就能夠設置元素的 widthheight 了且默認寬度不佔滿父元素。

以下面的代碼,咱們知道 a 標籤是行內元素,因此設置它的 width 是 沒有效果的,可是設置爲 position:absolute之後,就能夠了。

<div class="container"> <a href="#" title="">進入課程請單擊這裏</a> </div>

css代碼

<style> .container a{ position:absolute; width:200px; background:#ccc; } </style>
相關文章
相關標籤/搜索