實現css文字垂直居中的8種方法_經驗交流

來源:腳本之家  責任編輯:小易  

在說到這個問題的時候,也許有人會問CSS中不是有vertical-align屬性來設置垂直居中的嗎?即使是某些瀏覽器不支持我只需做少許的CSS Hack技術就可以!所以在這里我還要啰嗦兩句,CSS中的確是有vertical-align屬性,但是它只對(X)HTML元素中擁有valign特性的元素才生效,例如表格元素中的、、等,而像、這樣的元素是沒有valign特性的,因此使用vertical-align對它們不起作用。CSS網頁布局DIV水平居中的各種方法一、單行垂直居中如果一個容器中只有一行文字,對它實現居中相對比較簡單,我們只需要設置它的實際高度height和所在行的高度line-height相等即可。如:imoker.cn(愛摩客)提供的代碼片段:div {height:25px;line-height:25px;overflow:hidden;}這段代碼很簡單,后面使用overflow:hidden的設置是為了防止內容超出容器或者產生自動換行,這樣就達不到垂直居中效果了。imoker.cn(愛摩客)提供的代碼片段:DOCTYPEhtml PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">html xmlns="http://www.w3.org/1999/xhtml">單行文字實現垂直居中html;charset=utf-8"/>body { font-size:12px;font-family:tahoma;}div {height:25px;line-height:25px;border:1px solid#FF0099;background-color:#FFCCFF;}現在我們要使這段文字垂直居中顯示!不過在Internet Explorer 6及以下版本中,這和方法不支持對圖片設置垂直居中。二、多行未知高度文字的垂直居中如果一段內容,它的高度是可變的那么我們就可以使用上一節講到的實現水平居中時使用到的最后一種方法,就是設定Padding,使上下的padding值相同即可。同樣的,這也是一種“看起來”的垂直居中方式,它只不過是使文字把完全填充的一種方式而已?梢允褂妙愃葡旅娴拇a:imoker.cn(愛摩客)提供的代碼片段:div {padding:25px;}這種方法的優點就是它可以在任何瀏覽器上運行,并且代碼很簡單,只不過這種方法應用的前提就是容器的高度必須是可伸縮的。imoker.cn(愛摩客)提供的代碼片段:DOCTYPEhtml PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">html xmlns="http://www.w3.org/1999/xhtml">多行文字實現垂直居中html;charset=utf-8"/>body { font-size:12px;font-family:tahoma;}div {padding:25px;border:1px solid#FF0099;background-color:#FFCCFF;width:760px;}pre>現在我們要使這段文字垂直居中顯示!div {padding:25px;border:1px solid#FF0099;background-color:#FFCCFF;}div>三、多行文本固定高度的居中在本文的一開始,我們已經說過CSS中的vertical-align屬性只會對擁有valign特性的(X)HTML標簽起作用,但是在CSS中還有一個display屬性能夠模擬,所以我們可以使用這個屬性來讓模擬就可以使用vertical-align了。注意,display:table和display:table-cell的使用方法,前者必須設置在父元素上,后者必須設置在子元素上,因此我們要為需要定位的文本再增加一個元素:imoker.cn(愛摩客)提供的代碼片段:div#wrap {height:400px;display:table;}div#content {vertical-align:middle;display:table-cell;border:1px solid#FF0099;background-color:#FFCCFF;width:760px;}imoker.cn(愛摩客)提供的代碼片段:DOCTYPEhtml PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">html xmlns="http://www.w3.org/1999/xhtml">多行文字實現垂直居中html;charset=utf-8"/>body { font-size:12px;font-family:tahoma;}div#wrap {height:400px;display:table;}div#content {vertical-align:middle;display:table-cell;border:1px solid#FF0099;background-color:#FFCCFF;width:760px;}pre>現在我們要使這段文字垂直居中顯示!div#wrap {height:400px;display:table;}div#content {vertical-align:middle;display:table-cell;border:1px solid#FF0099;background-color:#FFCCFF;width:760px;}div>這個方法應該是很理想了,但是不幸的是Internet Explorer 6 并不能正確地理解display:table和display:table-cell,因此這種方法在Internet Explorer 6及以下的版本中是無效的。嗯,這讓人很郁悶!不過我們還其它的辦法。四、在Internet Explorer中的解決方案在Internet Explorer 6及以下版本中,在高度的計算上存在著缺陷的。在Internet Explorer 6中對父元素進行定位后,如果再對子元素進行百分比計算時,計算的基礎似乎是有繼承性的(如果定位的數值是絕對數值沒有這個問題,但是使用百分比計算的基礎將不再是該元素的高度,而從父元素繼承來的定位高度)。例如,我們有下面這樣一個(X)HTML代碼段:imoker.cn(愛摩客)提供的代碼片段:如果我們對subwrap進行了絕對定位,那么content也會繼承了這個屬性,雖然它不會在頁面中馬上顯示出來,但是如果再對content進行相對定位的時候,你使用的100%分比將不再是content原有的高度。例如,我們設定了subwrap的position為40%,我們如果想使content的上邊緣和wrap重合的話就必須設置top:-80%;那么,如果我們設定subwrap的top:50%的話,我們必須使用100%才能使content回到原來的位置上去,但是如果我們把content也設置50%呢?那么它就正好垂直居中了。所以我們可以使用這中方法來實現Internet Explorer 6中的垂直居中:imoker.cn(愛摩客)提供的代碼片段:div#wrap {border:1px solid#FF0099;background-color:#FFCCFF;width:760px;height:400px;position:relative;}div#subwrap {position:absolute;border:1px solid#000;top:50%;}div#content {border:1px solid#000;position:relative;top:-50%;}當然,這段代碼只能在Internet Exlporer 6等計算存在問題的瀏覽器中才會有作用。(不過我不解,我查閱了很多文章,不知道是因為出處相同還是什么原因,似乎很多人都不愿意去解釋Internet Exlporer 6中這個Bug的原理,我也只是了解了一點皮毛,還要再研究)imoker.cn(愛摩客)提供的代碼片段:DOCTYPEhtml PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">html xmlns="http://www.w3.org/1999/xhtml">多行文字實現垂直居中html;charset=utf-8"/>body { font-size:12px;font-family:tahoma;}div#wrap {border:1px solid#FF0099;background-color:#FFCCFF;width:760px;height:400px;position:relative;}div#subwrap {position:absolute;top:50%;}div#content {position:relative;top:-50%;}pre>現在我們要使這段文字垂直居中顯示!div#wrap {border:1px solid#FF0099;background-color:#FFCCFF;width:760px;height:500px;position:relative;}div#subwrap {position:absolute;border:1px solid#000;top:50%;}div#content {border:1px solid#000;position:relative;top:-50%;}div>五、完美的解決方案那么我們綜合上面兩種方法就可以得到一個完美的解決方案,不過這要用到CSS hack的知識。對于如果使用CSS Hack來區分瀏覽器,你可以參考這篇“簡單CSS hack:區分IE6、IE7、IE8、Firefox、Opera”:imoker.cn(愛摩客)提供的代碼片段:div#wrap {display:table;border:1px solid#FF0099;background-color:#FFCCFF;width:760px;height:400px;position:relative;overflow:hidden;}div#subwrap {vertical-align:middle;display:table-cell;position:absolute;top:50%;}div#content {position:relative;top:-50%;}至此,一個完美的居中方案就產生了。imoker.cn(愛摩客)提供的代碼片段:DOCTYPEhtml PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">html xmlns="http://www.w3.org/1999/xhtml">多行文字實現垂直居中html;charset=utf-8"/>body { font-size:12px;font-family:tahoma;}div#wrap {display:table;border:1px solid#FF0099;background-color:#FFCCFF;width:760px;height:400px;position:relative;overflow:hidden;}div#subwrap {vertical-align:middle;display:table-cell;position:absolute;top:50%;}div#content {position:relative;top:-50%;}pre>現在我們要使這段文字垂直居中顯示!div#wrap {border:1px solid#FF0099;background-color:#FFCCFF;width:760px;height:500px;position:relative;}div#subwrap {position:absolute;border:1px solid#000;top:50%;}div#content {border:1px solid#000;position:relative;top:-50%;}div>p.s.垂直居中vertical-align的值是middle,而水平居中align的值是center,雖然同是居中但關鍵字不同www.anxorj.tw防采集請勿采集本網。

注:以下demo都只是針對現代瀏覽器所做,未兼容低版本的IE以及其他非主流瀏覽器。

實現css文字垂直居中的8種方法如下:

1.使用絕對定位和負外邊距對塊級元素進行垂直居中

文字垂直居中的有如下的方法 方法一:valign:middle 代碼如下: 1234567<table><tbody><tr><td valign=\"middle\">垂直居中</td></tr></tbody></table> 方法二:style=\"display:table-cell;

css垂直居中效果:

pre>現在我們要使這段文字垂直居中顯示!Webjx.Com div#wrap { height:400px;display:table;} div#content { vertical-align:middle;display:table-cell;border:1px solid#FF0099;

css垂直居中實現代碼:

代碼如下,自己測試寫的,哪里不懂請追問 div1{ width:400px;height:200px;margin:0 auto;} div1 ul{ list-style:none;} div1 li{ float:left;} div1 li.item1{ margin-left:5px;margin-right:5

這個方法兼容性不錯,但是有一個小缺點:必須提前知道被居中塊級元素的尺寸,否則無法準確實現垂直居中。

2.使用絕對定位和transform

2、如果是多行文字,上面的垂直居中的方法就不行了,得用變通的方法實現;這里建議使用table方法,在table外面再套上相應的div;代碼如下: height:300px;background-color:red\"> 3、多行文字居中

代碼如下:

你們假設你的DIV是高度100PX,寬度是1000PX,那你這樣寫,你的文字就會水平垂直居中: height:100px;text-align:center;line-height:100px;border:blue solid 1px;水平垂直居中 CSS是這樣的,text-

這種方法非常明顯的好處就是不必提前知道被居中的元素的尺寸,因為transform中偏移的百分比就是相對于元素自身的尺寸而言。

3.絕對定位結合margin:auto

這種方式的兩個核心是:把要垂直居中的元素相對于父元素絕對定位,top和bottom設置為相等的值,我這里設置成0了,當然也可以設置為99999px或者-99999px,無論什么,只要兩者相等就行。這一一步做完之后再將要居中的元素的margin設為auto,這樣就可以實現垂直居中了。

被居中元素的寬度也可以不設置,但是不設置的話,就必須是圖片這種自身就包含尺寸的元素,否則無法實現。

4.使用padding實現子元素的垂直居中

這種方式非常簡單,就是給父元素設置相等的上下內邊距,則子元素自然是垂直居中的,自然這個時候父元素是不能設置高度的,要讓它自動被填充起來,除非設置了一個正好等于上內邊距+子元素高度+下內邊距的值,否則無法精確地垂直居中。

這種方式看似沒有什么技術含量,但其實在某種場景下也是非常好用的。

5.使用flex布局

flex布局(彈性布局/伸縮布局)里門道頗多,這里先針對用到的東西簡單說一下,想深入學習的小伙伴可以去看阮一峰老師的博客。

flex也就是flexible,意思為靈活的,柔韌的,易彎曲的。

元素可以通過設置display:flex;將其指定為flex布局的容器,指定好了容器之后再為其添加align-items屬性,該屬性定義項目在交叉軸(這里是縱向周)上的對齊方式,可能的取值有五種,分別如下:

flex-start:交叉軸的起點對齊;flex-end:交叉軸的重點對齊;

center:交叉軸的重點對齊;baseline項目第一行文字的基線對齊;

strech(該值是默認值):如果項目沒有設置高度或者設置為auto,那么將占滿整個容器的高度。

6.彈性布局

這種方式也是給父元素設置display:flex,設置好之后改變主軸的flex-direction:column,該屬性可能的取值有四個,分別如下:

row(該值為默認值):主軸為水平方向,起點在左端;

row-reverse,主軸是水平方向,起點在有端;

column主軸為垂直方向,起點在上沿;

column-reverse:主軸為垂直方向,起點在下沿。

justify-content屬性定義了項目在主軸上的對齊方式,可能取的值有五個,分別如下(不過具體的對齊方式與主軸的方向有關,以下的值都是假設主軸為從左到右的):

flex-staart(該值是默認值):左對齊;

flex-end:右對齊;

center:居中對齊;

space-between:兩端對齊,各個項目之間的間隔均對齊;

space-around:各個項目兩側的間隔相等。

7.還有一種在前面已經見到過很多次的方式就是使用line-height對單行文本進行垂直居中

這里有一個小坑需要大家注意:line-height(行高)的值不能設為100%;我們來看看官網文檔中給出的關于line-height取值為百分比時候的描述:基于當前字體尺寸的百分比行間距,所以大家就明白了,如果是百分比是相對于字體尺寸來講的。

8.使用display和vertical-align對容器里的文字進行垂直居中

這里關于vertical-align啰嗦兩句:vertical-align屬性只對擁有valign特性的html元素起作用,例如表格元素中的<td><th>等等,而像<div><span>這樣的元素是不行的。

valign屬性規定單元格中內容的垂直排列方式,語法:<tdvalign="value">,value的可能取值有四種:

top:對內容進行上對齊

middle:對內容進行居中對齊

bottom:對內容進行下對齊

baseline:基線對齊

關于baseline值:基線是一條虛構的線。在一行文本中,大多數字母以基線為基準。baseline值設置行中的所有表格數據都分享相同的基線。該值的效果常常與bottom值相同。不過,如果文本的字號各不相同,那么baseline的效果會更好。

更多關于CSS垂直居中的方法大家可以參考本文下面的相關文章或者咨詢我們的小編

一、原始使用writing-mode屬性-不推薦語法:writing-mode:lr-tb或writing-mode:tb-rl參數:1、lr-tb:從左向右,從上往下2、tb-rl:從上往下,從右向左運行代碼發現,IE顯示正常,火狐、谷歌瀏覽器卻不支持,所以不建議使用writing-mode屬性。二、使用CSS模擬文字豎排對文字對象寬度設置只能排下一個文字的寬度距離,讓文字一行排不下兩個文字使其文字自動換行,就形成了豎立排版需求。DOCTYPEhtml>html;charset=gb2312"/>豎列排版實例body{text-align:center}shuli{ margin:0 auto;width:20px;line-height:24px;border:1px solid#333}我是豎列排版說明:對文字DIV設置較小的寬度,以達到一排只能排下一個文字,這樣文字就自動換行,實現垂直豎列排版。三、使用br換行讓其文字垂直豎排顯示利用html br換行標簽實現文字換行,對每個文字后加上換行br標簽讓其豎列排版。DOCTYPEhtml>html;charset=gb2312"/>豎列排版實例body{text-align:center;line-height:22px}CSS注釋說明:設置css文字居中,css行高為22px間隔*/我是豎列排版內容來自www.anxorj.tw請勿采集。


  • 本文相關:
  • js+css設置img在div中只顯示img垂直居中的部分
  • js+css 圖片等比縮小并垂直居中實現代碼
  • css支持標準的圖片垂直居中
  • css list grid layout 圖片垂直居中
  • 用css實現圖片垂直居中的使用技巧
  • css實現文字垂直居中的代碼
  • css解決未知高度垂直居中的問題
  • css解決未知高度垂直居中
  • 完美實現css垂直居中的11種方法
  • web標準網頁布局中盡量不要使用的html標簽
  • firefox下rowspan+border+border-collapse的bug
  • div+css實現的滑動門菜單特效代碼
  • meta標簽詳解
  • css不用圖片美化按鈕
  • css漸變文本效果的兩種方法比較
  • div的dispaly:inline樣式 和span的區別
  • 一個新的css菜單代碼
  • css position: absolute、relative詳解
  • 用css實現圖片垂直居中的使用技巧
  • 哪位知道如何用css實現文字顯示豎排,并且垂直居中在固定的高度中
  • DIV+CSS如何讓文字垂直居中?
  • CSS中圖片和文字在一行內,如何讓圖片垂直居中顯示?
  • html如何將框內的文字既垂直居中又水平居中?
  • 如何css讓表格td中的文字垂直居中,請注意這都是一行一列的?
  • CSS怎么實現垂直居中?
  • 用css實現文字跟兩邊的水平線垂直居中
  • css如何使div里面的多行文字垂直居中
  • 如何使文字在div中水平和垂直居中的css代碼,水平垂直居中
  • 未知高度的DIV內文字垂直居中用CSS怎么實現
  • 網站首頁網頁制作腳本下載服務器操作系統網站運營平面設計媒體動畫電腦基礎硬件教程網絡安全經驗交流基礎教程vml相關首頁css/html經驗交流js+css設置img在div中只顯示img垂直居中的部分js+css 圖片等比縮小并垂直居中實現代碼css支持標準的圖片垂直居中css list grid layout 圖片垂直居中用css實現圖片垂直居中的使用技巧css實現文字垂直居中的代碼css解決未知高度垂直居中的問題css解決未知高度垂直居中完美實現css垂直居中的11種方法web標準網頁布局中盡量不要使用的html標簽firefox下rowspan+border+border-collapse的bugdiv+css實現的滑動門菜單特效代碼meta標簽詳解css不用圖片美化按鈕css漸變文本效果的兩種方法比較div的dispaly:inline樣式 和span的區別一個新的css菜單代碼css position: absolute、relative詳解用css實現圖片垂直居中的使用技巧iframe自適應高度的多種方法方法css position: absolute、relati用css實現下拉菜單的多種方法淺談href=#與href=javascript:voimg標簽中alt和title屬性的正確使css display:none使用注意事項小scrollwidth,clientwidth與offsediv+css布局教程大全與pdf電子書css分頁樣式代碼css圖片切換效果代碼[不用js]xhtml下css+div布局總結 超強推薦轉載未知大小的圖片在一個已知大小容器中用css給圖片打標的方法徹底弄懂css盒子模式系列教程集合推薦個不錯的表單input的高級用法11例如何實現多風格選擇 樣式實時切換網頁設計中的 serif 和 sans-serif字體應position:relative/absolute無法沖破的等css 使用sprites技術實現圓角效果頁面布局黃金比例[圖片]
    免責聲明 - 關于我們 - 聯系我們 - 廣告聯系 - 友情鏈接 - 幫助中心 - 頻道導航
    Copyright © 2017 www.anxorj.tw All Rights Reserved
    陕西快乐10分下载