整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
技術等級】初級
【承接文章】《CSS段落行高，竟然能夠實現垂直居中功能，神奇的CSS技術》
本文重點講解CSS技術中文本樣式的 vertical-align 屬性的詳細用法。本文屬于前端開發的初級教程，適合于剛剛開始接觸CSS技術的學習者。
vertical-align屬性的用法較為復雜，該屬性的取值較多，不了解這個屬性用法的學習者，一定要堅持把這篇文章讀完。
一、設置垂直方向的對齊方式：
CSS技術利用 vertical-align 屬性來設置內聯元素的垂直對齊方式
該屬性的功能是：設置內聯元素或內聯塊元素相對于所在行其他元素的垂直對齊方式。這里在對齊時，都是考慮基線的對齊，即內聯元素的基線相對于所在行其他元素的基線的垂直對齊方式。
這里需要注意的一定要是“內聯元素”或“內聯塊元素”。
【有關“內聯元素”的知識，可以參考小海老師前面寫的《CSS段落對齊方式，系統認識塊級元素與內聯元素，CSS前端進階篇》一文】
該屬性的取值可以有以下幾種：
帶有單位的數值，可以取負值，在基線對齊的基礎上，內聯元素向下移動一定的距離（正值）或者向上移動一定的距離（負值）。
%，可以取負值，在基線對齊的基礎上，內聯元素向下移動line-height屬性的百分比的距離（正百分比）或者向上移動line-height屬性的百分比的距離。
baseline，【默認值】基線對齊，內聯元素的基線與所在行的其他元素的基線對齊。
sub，上標。
super，下標。
top，頂部對齊，內聯元素的頂部與所在行的其他元素中最高的元素的頂部對齊。
text-top，文本頂部對齊，內聯元素的頂部與所在行的文字頂部對齊。
middle，中部對齊，內聯元素的中部與所在行其他元素的中部對齊。
bottom，底部對齊，內聯元素的底部與所在行的其他元素中最低的元素的底部對齊。
text-bottom，文本底部對齊，內聯元素的底部與所在行的文字底部對齊。
二、基線垂直對齊：
要想深入了解vertical-align屬性各項取值的含義，首先，讓我們先看一看什么是基線對齊。
例1：在段落標記<p></p>內部，放置一個圖片和一行文字。HTML代碼如下。
<p>
<img src="images/a.jpg" /> 小海前端
</p>
得到的效果如下圖所示，仔細觀察下圖：圖片底部和文字底部是對齊的嗎？
例1的最終效果
仔細觀察，其實它們底部并沒有完全對齊。如果將文字的字號放大，可以看得更加明顯。
將例1中的文字放大后的效果
上圖中，由于文字字號的變大，在圖片中只呈現了一個“小”字，但是我們完全可以看出，圖片的底部并沒有和文字的底部對齊。而對齊文字的這個位置實際上是文字的“基線”。
【有關“基線”的知識，可以參考小海老師前面寫的《CSS段落行高，竟然能夠實現垂直居中功能，神奇的CSS技術》一文】
原來，圖片本身屬于內聯元素，而 內聯元素的vertical-align屬性的默認取值為baseline，即基線對齊，也就是圖片的基線（底部）默認和文字的基線對齊了。
三、取值為“帶有單位的數值”：
如果vertical-align屬性的取值為帶有單位的數值，則也是在基線對齊的基礎上開始上下移動一定的距離。
如果圖片的vertical-align屬性取值為0px，則依然為基線對齊的位置。
如果圖片的vertical-align屬性取值為5px，則在基線對齊位置的基礎上向下移動5px的距離。
如果圖片的vertical-align屬性取值為-5px，則在基線對齊位置的基礎上向上移動5px的距離。
四、取值為“百分比 ”：
如果vertical-align屬性的取值為百分比，則也是在基線對齊的基礎上開始上下移動一定的距離。
那么，問題來了。
百分比意味著移動多少像素的距離呢？
百分比又是以什么距離為基準的呢，即誰的百分比呢？
我們前端開發工程師一定要記住：vertical-align屬性的百分比取值不是父元素高度的百分比，而是 line-height 屬性取值的百分比。
即：vertical-align屬性的百分比取值是以line-height屬性的取值為基準的，及移動距離為vertical-align屬性的絕對值乘以line-height屬性取值的距離數。
假設：容器的line-height屬性取值為20px，則：
如果圖片的vertical-align屬性取值為0%，則依然為基線對齊的位置。
如果圖片的vertical-align屬性取值為50%，則在基線對齊位置的基礎上向下移動(20px*50%)的距離，即向下移動10px。
如果圖片的vertical-align屬性取值為-50%，則在基線對齊位置的基礎上向上移動(20px*50%)的距離，即向上移動10px。
五、取值為top和text-top：
例2：我們在例1的基礎上在段落<p></p>中再添加一個圖片，并設置圖片的高度大于文本。
仔細閱讀下列HTML代碼：
<p style="font-size:100px">
<img src="images/a.jpg" width="300" style="vertical-align:top" />
小海前端
<img src="images/a.jpg" width="500" />
</p>
從代碼中可以看出，文字“小海前端”左側的圖片設置了vertical-align屬性，并取值為top。根據文字“小海前端”左右的兩張圖片的width屬性可知，右側圖片的高度肯定比較高。
效果如下圖所示。
例2的最終效果
原因是：vertical-align屬性取值為top是指讓設置了該屬性的元素頂部和同行周圍元素中最高元素的頂部對齊。從圖中可知，顯然最高的元素是右側的圖片，因此就呈現為上圖中的外觀了。
而右面的圖片沒有設置vertical-align屬性，因此依然為“基線對齊”，即右側圖片的底部對齊文字的基線。
例3：在例2的基礎上，我們將右側圖片的高度縮小至比文字還小的程度，那可想而知，左側圖片就應該與文字頂部對齊了。
仔細閱讀下列HTML代碼：
<p style="font-size:100px">
<img src="images/a.jpg" width="300" style="vertical-align:top" />
小海前端
<img src="images/a.jpg" width="100" />
</p>
從代碼中可以看出，右側圖片的寬度由500改為了100，同時高度也會隨之等比縮小。
最終效果如下圖所示：
例3的最終效果
例4：在例2的基礎上，我們調整左側圖片vertical-align屬性的取值為text-top，則HTML代碼如下。
<p style="font-size:100px">
<img src="images/a.jpg" width="300" style="vertical-align:text-top" />
小海前端
<img src="images/a.jpg" width="500" />
</p>
則最終的顯示效果如下圖所示。
例4的最終效果
原因是：text-top屬性是要求內聯元素與同行內文本的頂部對齊。因此，就出現了上圖中的效果。
而右面的圖片沒有設置vertical-align屬性，因此依然為“基線對齊”，即右側圖片的底部對齊文字的基線。
vertical-align屬性還具備bottom和text-bottom取值，和這兩個頂部對齊（top和text-top）的含義是類似的，希望同學們自己在電腦上嘗試一下。
下一篇文章中，小海老師會為大家講解一個vertical-align屬性和line-height屬性的應用，用于去掉圖片在容器中放置時，底部產生的小距離。這是前端開發中非常經典的bug解決方案，對于希望深入了解前端開發的學習者真的是非常重要。
如果大家希望得到更加全面的關于HTML和CSS技術講解的內容，可以私信我，我會免費將小海老師自己編寫的HTML和CSS的PDF教材發給你，幫助你在前端開發的道路上闊步前行。
在頭條上所寫的這些文章都是從前端開發的基礎開始一步一步講起的。小海老師非常希望能有更多的前端開發初學者通過我寫的文章，逐步學到一定的知識，甚至慢慢有了入門的感覺。這些文章都是我這幾年教學過程中的經驗，每寫一篇時我都盡量把握好措辭，用簡單易懂的語言描述，同時精心設計版面，讓版面更加豐富，激發閱讀興趣。所以，每一篇文章可能篇幅不長，但是都要耗費小海老師很久的時間。
希望收藏了我寫的文章的你同時可以關注一下“小海前端”，因為這些文章都是連載的，并且是經過我精心整理和系統歸納過的。
關注“小海前端”，我會繼續為大家奉上更加深入的前端開發文章，也希望更多的初學者跟著學下去，我們共同將前端開發的路努力堅持的走下去。
許多方法可以將HTML元素與CSS對齊，但是一起使用或單獨使用它們并不是那么容易。開發人員所面臨的困難之一就是試圖將元素集中在頁面中間。
因此，在本文中，我將展示一些最常用的方法，即通過使用不同的CSS屬性在水平和垂直方向上居中圖像。
讓我們開始使用3個不同的CSS屬性將圖像水平居中。
使圖像水平居中的第一種方法是使用text-align屬性。但是，僅當圖像位于塊級容器（例如<div>）內時，此方法才有效：
使圖像居中的另一種方法是使用margin：auto屬性（用于左邊距和右邊距）。但是，單獨使用margin：Auto將不適用于圖像。如果需要使用margin：auto，則還必須使用2個其他屬性。
margin-auto屬性對內聯級別的元素沒有任何影響。由于<img>標簽是一個內聯元素，因此我們需要先將其轉換為塊級元素：
其次，我們還需要定義寬度。因此，左右邊緣可以占用其余的空白空間并自動對齊，可以這樣解決問題（除非我們給出100％的寬度）：
將圖像水平居中的第三種方法是使用display：flex。同樣，我們對容器使用text-align屬性，它也會使用display：flex。但是，僅使用display：flex是不夠的。容器還必須具有一個稱為justify-content的附加屬性。
justify-content屬性與display：flex一起使用，我們可以使用它水平放置圖像的中心。最后，圖像的寬度必須小于容器的寬度，否則，它會占用100％的空間，然后我們就無法對其進行集中化。
1、Display: Flex
對于垂直對齊，使用display：flex確實很有幫助。考慮到我們的容器的高度為800px，但圖像的高度僅為500px：
現在，在這種情況下，向容器中添加一行代碼（align-items：center）就可以了：
如果將align-items屬性與display：flex一起使用，就會將元素垂直放置。
2、位置：絕對和變換屬性
垂直對齊的另一種方法是一起使用position和transform屬性。這個有點復雜，所以讓我們一步一步地做。
步驟1：定義絕對位置
首先，我們將圖像的定位行為從靜態更改為絕對：
同樣，它應該位于相對放置的容器內，因此我們添加一個位置：相對于其容器的div。
步驟2：定義頂部和左側屬性
其次，我們定義圖像的頂部和左側屬性，并設置為50％。這會將圖像的起點（左上角）移到容器的中心：
步驟3：定義變換屬性
在第二步的時候已經將圖像的一部分移出容器。因此，我們需要將其取回內部。在圖像上定義轉換屬性，并在其X和Y軸上添加負50％可以達到目的：
還可以使用其他方法進行水平和垂直居中，我這里只嘗試了最常用的方法。希望這篇文章可以幫助你了解如何在頁面中心對齊圖像。
篇文章主要給大家介紹一下如何使用html+css實現元素的水平與垂直居中效果，這也是我們網頁在編碼制作中會經常用到的問題。
主要實現css代碼：
水平居中：text-align:center;
垂直居中：line-height:XXpx; /*line-height與元素的height的值一致*/
我們先來看這樣一個例子，加入我們這里有一個div，寬度和高度為300px，背景顏色為黑色，然后在div中有一行簡短文字，我們只需要使用line-height:200px;就可以實現文字的居中效果，具體的代碼如下所示：
由上圖可以看出我們實現了單行文字的垂直居中效果，但是很多時候我們的文字并不知道具體有多少，可能有一行，也可能有很多行，那么遇到多行文字的這種問題我們要如何處理呢。
對于多行文本的垂直居中我們有很多種實現方式，我們這里逐個的來看一下；
1、使用display:table來實現
主要實現代碼：
display: table使塊狀元素成為一個塊級表格;
display: table-cell;子元素設置成表格單元格;
vertical-align: middle;使表格內容居中顯示，即可實現垂直居中的效果;
具體的html與css的代碼就如下所示：
2、使用absolute與transform配合實現
主要實現代碼：
position:absolute; 首先給文本絕對定位；
left:50%;top:50%;transform:translate(-50%,-50%); 讓文本距離盒子左邊和上邊分別為50%，再用transform向左（上）平移它自己寬度（高度）的50%，也就達到居中效果了。
具體的html與css的代碼就如下所示：
3、使用flex實現
主要實現代碼：
display: flex;設置 display 屬性的值為 flex 將其定義為彈性容器
align-items: center;定義項目在交叉軸（縱軸）上如何對齊，垂直對齊居中
justify-content: center; 定義了項目在主軸上的對齊方式，水平對齊居中
具體的html與css的代碼就如下所示：
好了，本篇文章就給大家說到這里，大家自己動手寫一下看能不能寫出一樣的頁面效果出來，也可以找一些類似的頁面自己練習一下，有需要源碼的可以直接私信【網站源碼】即可。
每日金句：了解別人心里想什么，你才能得到自己想要的。喜歡我的文章的小伙伴記得關注一下哦，每天將為你更新最新知識。
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
