CSS之小技巧

css樣式設計小技巧

水平居中設定-行內元素如果被設定元素為文字、等行內元素時，水平居中是通過給父元素設定 text-align:center 來實現的。水平居中設定-定寬塊狀元素當被設定元素為塊狀元素時用 text-align：center 就不起作用了，這時也分兩種情況：定寬塊狀元素和不定寬塊狀元素。滿足定寬和塊狀兩個條件的元素是可以通過設定「左右margin」值為「auto」來實現居中的。水平居中總結-不定寬塊狀元素方法（一）在實際工作中我們會遇到需要為「不定寬度的塊狀元素」設定居中，比如網頁上的分頁導航，因為分頁的數量是不確定的，所以我們不能通過設定寬度來限制它的彈性。不定寬度的塊狀元素有三種方法居中（這三種方法目前使用的都比多）： a.加入 table 標籤 b.設定 display;inline 方法 c.設定 position:relative 和 left:50%; 這一小節我們來講一下第一種方法：第一步：為需要設定的居中的元素外面加入乙個 table 標籤 ( 包括、、)。第二步：為這個 table 設定「左右 margin 居中」（這個和定寬塊狀元素的方法一樣）。

舉例如下：

html**：
href="#">1a>
li>
href="#">2a>
li>
href="#">3a>
li>
ul>
td>
tr>
tbody>
table>
div>
css**：
table
ulli
style>

水平居中總結-不定寬塊狀元素方法（二）第二種方法：改變塊級元素的 dispaly 為 inline 型別，然後使用 text-align:center 來實現居中效果。這種方法相比第一種方法的優勢是不用增加無語義標籤，簡化了標籤的巢狀深度，但也存在著一些問題：它將塊狀元素的 display 型別改為 inline，變成了行內元素，所以少了一些功能，比如設定長度值。

方法三：通過給父元素設定 float，然後給父元素設定 position:relative 和 left:50%，子元素設定 position:relative 和 left:-50% 來實現水平居中。

.container .container ul .container

listyle>

這種方法可以保留塊狀元素仍以 display:block 的形式顯示，優點不新增無語議表標籤，不增加巢狀深度，但它的缺點是設定了 position:relative，帶來了一定的***。這三種方法使用得都非常廣泛，各有優缺點，具體選用哪種方法，可以視具體情況而定。垂直居中-父元素高度確定的單行文字父元素高度確定的單行文字的豎直居中的方法是通過設定父元素的 height 和 line-height 高度一致來實現的。垂直居中-父元素高度確定的多行文字（方法一）方法一：使用插入 table (包括tbody、tr、td)標籤，同時設定 vertical-align：middle。說到豎直居中，css 中有乙個用於豎直居中的屬性 vertical-align，但這個樣式只有在父元素為 td 或 th 時，才會生效。所以又要插入 table 標籤了。垂直居中-父元素高度確定的多行文字（方法二）

在 chrome、firefox 及 ie8 以上的瀏覽器下可以設定塊級元素的 display 為 table-cell，啟用 vertical-align 屬性，但注意 ie6、7 並不支援這個樣式。

css**：
.container
style>

這種方法的好處是不用新增多餘的無意義的標籤，但缺點也很明顯，它的相容性不是很好，不相容 ie6、7。隱性改變display型別有乙個有趣的現象就是當為元素（不論之前是什麼型別元素，display:none 除外）設定以下 2 個句之一： position : absolute float : left 或 float:right 元素會自動變為以 display:inline-block 的方式顯示，當然就可以設定元素的 width 和 height 了且預設寬度不佔滿父元素。

如下面的**，小夥伴們都知道 a 標籤是行內元素，所以設定它的 width 是沒有效果的，但是設定為 position:absolute 以後，就可以了。

class="container">
href="#"
title="">進入課程請單擊這裡a>
div>
css**
.container
a 
style>

CSS之小技巧

css之小技巧

CSS揭秘之《小技巧》

CSS小技巧之盒子那點事兒

CSS之小技巧

css之小技巧

CSS揭秘之《小技巧》

CSS小技巧之盒子那點事兒

相關推薦