這篇文章給大家分享的是有關(guān)如何利用css樣式實現(xiàn)表格中字體垂直居中的內(nèi)容。小編覺得挺實用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。

創(chuàng)新互聯(lián)公司于2013年成立，先為貴定等服務(wù)建站，貴定等地企業(yè)，進行企業(yè)商務(wù)咨詢服務(wù)。為貴定企業(yè)網(wǎng)站制作PC+手機+微官網(wǎng)三網(wǎng)同步一站式服務(wù)解決您的所有建站問題。

利用css樣式實現(xiàn)表格中字體垂直居中的方法，具體代碼如下所示：

有一個自定義表格如下所示，當(dāng)所返回數(shù)據(jù)改變時，文字都能自動居中 

//html  
//用兩個div做容器
          <el-col :span="3" class="col_row1">
                 <div class="grid-content1 ">
                  <div class="subject1">{{item.subject1}}</div>
                  </div>  
              </el-col>
//css
      .grid-content1 {
            // width: 3.125rem;
            width: 100%;
            height:3.75rem;
            display: table;
          }
          .subject1 {
            display: table-cell;
            vertical-align: middle;
          }

補充：下面接著看下css樣式—字體垂直、水平居中

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

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

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

為啥呢，這是。好吧?？礃邮街?nbsp; display: table-cell  ，作為表格單元格顯示，如此一來， vertical-align:middle  屬性起作用了。去掉display可就不行了哦！！

一：基本概念

首先，依舊是概念。介紹一下行內(nèi)元素和塊級元素，這個很重要，因為有的屬性只能用于塊元素，而有的正好相反，在一定的情況下，它們也可以相互轉(zhuǎn)換，比如用display來進行設(shè)置。

1.行內(nèi)元素(又叫內(nèi)聯(lián)元素inline element):

   (1) 不占據(jù)一整行，隨內(nèi)容而定，有以下特點：

   (2) 不可以設(shè)置寬高，也不可以設(shè)置行高，其寬度隨著內(nèi)容增加，高度隨字體大小而改變。

(3) 內(nèi)聯(lián)元素可以設(shè)置外邊界，但是外邊界不對上下起作用，只能對左右起作用。

(4) 也可以設(shè)置內(nèi)邊界，但是內(nèi)邊界在ie6中不對上下起作用，只能對左右起作用。

常用的內(nèi)聯(lián)元素有：a - 錨點，b - 粗體(不推薦)，br - 換行，em - 強調(diào)，font - 字體設(shè)定(不推薦)，i - 斜體，img - 圖片，input - 輸入框，label - 表格標(biāo)簽，

select - 項目選擇，small - 小字體文本，span - 常用內(nèi)聯(lián)容器，定義文本內(nèi)區(qū)塊，strike - 中劃線，strong - 粗體強調(diào)

1.塊級元素block element:

   (1) 總是在新行上開始，占據(jù)一整行;

   (2) 高度，行高以及外邊距和內(nèi)邊距都可控制;

(3) 寬度始終是與瀏覽器寬度一樣，與內(nèi)容無關(guān);

(4) 它可以容納內(nèi)聯(lián)元素和其他塊元素。

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

列表互相轉(zhuǎn)換：使用display設(shè)置可以使得行內(nèi)元素擁有塊級元素的特性，反之也可以

二、現(xiàn)在開始說一下簡單的幾種基礎(chǔ)的居中方式

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

這個屬性只能作用于塊元素(或者被CSS控制為塊元素的內(nèi)聯(lián)元素，但是被控制為內(nèi)聯(lián)元素的塊元素是不行的)。一句話來說，就是要擁有塊元素的特點的那些元素。這個很好理解，居中，肯定是行居中，如果使用它的元素本身不擁有完整的在寬度上的獨立空間，它當(dāng)然沒有能力讓它內(nèi)部的文字或者圖片居中。

父元素的這個屬性對它下面的子元素也起作用，比如一個div設(shè)置了text-align居中，則它內(nèi)部的文字可以居中，它的子div內(nèi)部的文字也可以居中。但是子元素中文字的居中，是在子div中居中，而不是對于父div居中。也就是，它里面所有的文字，都會相對于最靠近自己的一層div來實現(xiàn)居中。所以，這個屬性不能用于div在父div中的整體居中。(不僅僅是div，所有的表現(xiàn)為塊元素的元素)。

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

一般情況下，可以設(shè)置margin:0 auto;這會使這個塊級元素在它的父級元素中居中，上下左右都會居中。

如果只要水平居中的話，就設(shè)置margin-left:auto;margin-right:auto;

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

在其他的一些文章中，看到有不少方法來介紹不確定寬度的塊的居中的。

其實簡單點說，不需要這么麻煩。我們可以這樣來理解，沒有明確設(shè)定寬度的block，根據(jù)塊級元素的性質(zhì)，它默認(rèn)是獨占一行的，所以這個時候block本身就是瀏覽器窗口的寬度，就不必要來設(shè)置水平居中了。

若是此時對塊中的內(nèi)容進行居中的話：

如果塊元素的子元素也為塊元素，就對子元素使用margin auto一類的方式就好啦;

如果塊級元素的子元素為行內(nèi)元素，就用我們一開始介紹的text-align也就可以解決;

對于子元素為塊元素的，也可以用display設(shè)置為inline然后再用text-align

4. vertical-align用于行內(nèi)元素中的垂直居中

vertical-align，這個可以用的很復(fù)雜。看了一些文章和例子，自己也有點小混亂，只說一下最簡單的用法：

這個屬性用于

1、內(nèi)聯(lián)元素(以及被轉(zhuǎn)化為內(nèi)聯(lián)元素的塊元素)

2 、display設(shè)置為table-cell的元素，

在 firefox 和 ie8 下，可以設(shè)置塊級元素的 display 值為 table-cell，來激活 vertical-align 屬性，顯示效果和就和表格中的 valign="center" 一樣了。但 ie6,7 并不支持。

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

這樣的寫法：vertical-align:middle;就可以設(shè)置文字或者圖片的垂直居中。只要具有行內(nèi)元素的特性的元素使用這個屬性，對它的子元素中的文字和圖片也是起作用的。但是作用效果為使得文字或者圖片相對于緊靠著它們的父元素來進行居中。這個和text-align上面說過的部分是類似的。

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

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

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

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

在塊的高度不確定的情況下，其實它的高度就是取決于里面內(nèi)容的高度。如果內(nèi)部只有文字或者圖片的話，那就自然垂直居中了，其實就不必特意要設(shè)置。

如果非要設(shè)置什么的話，比如希望塊大一些，文字在塊中垂直居中好看一點，可以設(shè)置內(nèi)邊距，如padding-top:20px;padding-bottom:20px;

當(dāng)然，如果上下內(nèi)邊距設(shè)置的不一樣，就自然不居中了。

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

設(shè)置塊級元素自身在父元素中的垂直居中，可以參照塊級元素的水平居中的方法(上面說過)，設(shè)置外邊距即可。如果不想設(shè)置水平居中，只要設(shè)置上下外邊距為auto就好。

也可以采用vertical-align:middle;的方式，但是前提是把display設(shè)置為table-cell。這樣的話要注意瀏覽器兼容性問題。

感謝各位的閱讀！關(guān)于“如何利用css樣式實現(xiàn)表格中字體垂直居中”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，讓大家可以學(xué)到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！

網(wǎng)頁標(biāo)題：如何利用css樣式實現(xiàn)表格中字體垂直居中
文章來源：http://chinadenli.net/article8/gdosop.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供ChatGPT、網(wǎng)站導(dǎo)航、品牌網(wǎng)站設(shè)計、移動網(wǎng)站建設(shè)、網(wǎng)站維護、

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)