css樣式—字體垂直、水平居中

「來，老闆娘，給個div瞅瞅」：

「好的，宇哥，來了了了」：

<div class="tt">啦啦啦</div>

「給各樣啊，我去」：

「是」：

.tt{
            padding: 0px;
            width:500px;
            height:200px;
            text-align:center;
            background-color:#F69;

            display: table-cell;
            vertical-align:middle
        }

爲啥呢，這是。好吧。看樣式中  display: table-cell  ，做爲表格單元格顯示，如此一來， vertical-align:middle  屬性起做用了。去掉display可就不行了哦！！

 

一：

　　首先，依舊是概念。介紹一下行內元素和塊級元素，這個很重要，由於有的屬性只能用於塊元素，而有的正好相反，在必定的狀況下，它們也能夠相互轉換，好比用display來進行設置。

1.行內元素(又叫內聯元素inline element):

　   (1) 不佔據一整行，隨內容而定，有如下特色：

　   (2) 不能夠設置寬高，也不能夠設置行高，其寬度隨着內容增長，高度隨字體大小而改變。

　　(3) 內聯元素能夠設置外邊界，可是外邊界不對上下起做用，只能對左右起做用。

　　(4) 也能夠設置內邊界，可是內邊界在ie6中不對上下起做用，只能對左右起做用。

 

　　經常使用的內聯元素有：a - 錨點，b - 粗體(不推薦)，br - 換行，em - 強調，font - 字體設定(不推薦)，i - 斜體，img - 圖片，input - 輸入框，label - 表格標籤，

select - 項目選擇，small - 小字體文本，span - 經常使用內聯容器，定義文本內區塊，strike - 中劃線，strong - 粗體強調

 

1.塊級元素block element:

　   (1) 老是在新行上開始，佔據一整行;

　   (2) 高度，行高以及外邊距和內邊距均可控制;

　　(3) 寬度始終是與瀏覽器寬度同樣，與內容無關;

　　(4) 它能夠容納內聯元素和其餘塊元素。

 

　　經常使用的塊級元素有：div -最經常使用的塊級元素，dl - 和dt dd搭配使用的塊級元素，form - 交互表單，h1 - 大標題，hr - 水平分隔線，ol - 排序表單，p - 段落，ul - 非排序

列表互相轉換：使用display設置可使得行內元素擁有塊級元素的特性，反之也能夠。

　　

2、如今開始說一下簡單的幾種基礎的居中方式

1.塊中文字水平居中：text-align 用於塊級元素，做用在使用它的塊元素中的文字或者圖片上。使得它們在水平方向上居中。

　　這個屬性只能做用於塊元素(或者被CSS控制爲塊元素的內聯元素，可是被控制爲內聯元素的塊元素是不行的)。一句話來講，就是要擁有塊元素的特色的那些元素。這個很好理解，居中，確定是行居中，若是使用它的元素自己不擁有完整的在寬度上的獨立空間，它固然沒有能力讓它內部的文字或者圖片居中。

　　父元素的這個屬性對它下面的子元素也起做用，好比一個div設置了text-align居中，則它內部的文字能夠居中，它的子div內部的文字也能夠居中。可是子元素中文字的居中，是在子div中居中，而不是對於父div居中。也就是，它裏面全部的文字，都會相對於最靠近本身的一層div來實現居中。因此，這個屬性不能用於div在父div中的總體居中。(不只僅是div，全部的表現爲塊元素的元素)。

 

2 塊元素自身水平居中(肯定設置了寬度的塊)：margin。這個確定是接觸CSS一開始就知道的了。

　　通常狀況下，能夠設置margin:0 auto;這會使這個塊級元素在它的父級元素中居中，上下左右都會居中。

　　若是隻要水平居中的話，就設置margin-left:auto;margin-right:auto;

3 塊元素自身水平居中(不肯定寬度的塊)：

　　在其餘的一些文章中，看到有很多方法來介紹不肯定寬度的塊的居中的。

　　其實簡單點說，不須要這麼麻煩。咱們能夠這樣來理解，沒有明確設定寬度的block，根據塊級元素的性質，它默認是獨佔一行的，因此這個時候block自己就是瀏覽器窗口的寬度，就沒必要要來設置水平居中了。

　如果此時對塊中的內容進行居中的話：

　　若是塊元素的子元素也爲塊元素，就對子元素使用margin auto一類的方式就好啦;

　　若是塊級元素的子元素爲行內元素，就用咱們一開始介紹的text-align也就能夠解決;

　　對於子元素爲塊元素的，也能夠用display設置爲inline而後再用text-align

4. vertical-align用於行內元素中的垂直居中

　　vertical-align，這個能夠用的很複雜。看了一些文章和例子，本身也有點小混亂，只說一下最簡單的用法：

　　這個屬性用於

　　一、內聯元素(以及被轉化爲內聯元素的塊元素)

　　2 、display設置爲table-cell的元素，

　　在 firefox 和 ie8 下，能夠設置塊級元素的 display 值爲 table-cell，來激活 vertical-align 屬性，顯示效果和就和表格中的 valign="center" 同樣了。但 ie6,7 並不支持。

　　三、<td><tr>這樣的元素

　　　　這樣的寫法：vertical-align:middle;就能夠設置文字或者圖片的垂直居中。只要具備行內元素的特性的元素使用這個屬性，對它的子元素中的文字和圖片也是起做用的。可是做用效果爲使得文字或者圖片相對於緊靠着它們的父元素來進行居中。這個和text-align上面說過的部分是相似的。

5 塊級元素中的文字圖片垂直居中(針對塊的高度肯定的，這個是從另外一個博客上看到的，真的很實用哦，若是塊內只有這些文字的話)

　　文字在層(塊級元素)中垂直居中vertical-align 屬性是作不到的.咱們這裏有個比較巧妙的方法就是:設置height的高度與line-height的高度相同!

<div style="line-height:500px;height:500;"></div>

 

6 塊級元素中的文字圖片垂直居中(塊的高度不肯定的)

　　在塊的高度不肯定的狀況下，其實它的高度就是取決於裏面內容的高度。若是內部只有文字或者圖片的話，那就天然垂直居中了，其實就沒必要特地要設置。

　　若是非要設置什麼的話，好比但願塊大一些，文字在塊中垂直居中好看一點，能夠設置內邊距，如padding-top:20px;padding-bottom:20px;

　　固然，若是上下內邊距設置的不同，就天然不居中了。

 

7 塊級元素自身的垂直居中

　　設置塊級元素自身在父元素中的垂直居中，能夠參照塊級元素的水平居中的方法(上面說過)，設置外邊距便可。若是不想設置水平居中，只要設置上下外邊距爲auto就好。

　　也能夠採用vertical-align:middle;的方式，可是前提是把display設置爲table-cell。這樣的話要注意瀏覽器兼容性問題。