【CSS】多行文字垂直自適應居中，相容FF，Chrome ,IE8+

阿新 • • 發佈：2019-02-02

工作中遇到如（圖1）顯示的要求：一共3行文字，不管幾行的情況都要與左邊的圖片居中對齊，乍一看覺得不太可能，一般的思維都是用margin-top來留出上面的空間。

(圖1)

思考了一下，覺得只有表格才能做到這樣的佈局，那就來模擬一下表格吧！

把文字區域定為a，把外框定為b，b的高度是60px，把a設定成inline-block元素，讓a在b裡面垂直居中，用vertical-align:middle來實現，因為vertical-align:middle 需要配合行高，所以b設定line-height:60px，然後再讓a本身的文字以line-height:normal顯示，關鍵的css樣式如下：

.b{ height:60px; line-height:60px; }
.a{ display:inline-block; line-height:21px; vertical-align:middle; }

但是很遺憾，因為ie6，7對inline-block的支援問題，無法做到相容，只能做降級處理了，不管一行還是三行都是頂端對齊，如（圖1-3）所示。

【CSS】多行文字垂直自適應居中，相容FF，Chrome ,IE8+

工作中遇到如（圖1）顯示的要求：一共3行文字，不管幾行的情況都要與左邊的圖片居中對齊，乍一看覺得不太可能，一般的思維都是用margin-top來留出上面的空間。 (圖1) 思考了一下，覺得只有表格才能做到這樣的佈局，那就來模擬一下表格吧！把文字區域定為a，把外框定

css佈局-多行文字垂直居中

場景：父元素高度固定，如何使其中的文字垂直居中？方法一：程式碼： <style> *{padding: 0;margin:0;font-size: 12px;} div{float: left;width: 20

多行文字垂直方向上居中方法總結

問題描述最近寫專案的時候遇到個問題，資料從後臺傳送過來，可能是1行文字或者2行文字，要求居中顯示。如果按照height=line-height的方式來做，當文字是2行的時候就會使得2行文字的間距非常大。解決辦法： 1.首先給需要居中的元素外面再包一層div作為父元素。 2.

css實現多行文字在容器內垂直居中

提供兩種方法line-height和flex佈局方法<!DOCTYPE html> <html> <head> <meta charset="UTF-8

固定容器高度的多行文字垂直居中

需要 pad color ica round pre 絕對定位 span ddl 思路：把文字用span包裹起來，設置為inline-block，相當於圖片img的屬性。父div用table-cell的樣式，用vertical-align:middle實習上下居中 <

css實現多行文字超出省略號顯示，相容所有瀏覽器

原文連結：https://github.com/happylindz/blog/issues/12 float 特性實現多行文字截斷基本原理有個三個盒子 div，粉色盒子左浮動，淺藍色盒子和黃色盒子右浮動，當淺藍色盒子的高度低於粉色盒子，黃色盒子仍會處於淺藍色盒子右下方。如果淺藍

單行或多行文字垂直居中

以前發現的問題沒關注，現在終於重點弄了一下 <div> <p>？？？</p> </div> 假如知道div的高度，但是不知道p裡面的內容是1行還是2行，想讓p垂直居中的話可以js獲取p的高度和div的高度，然後p標籤margin-top的值

【css】多個子專案中間間隔固定排列

<!DOCTYPE html> <html> <head> <style> .flex-container { display: flex; wi

2018.12.15 2d形變,動畫,表格,多行文字垂直居中

1複習(過度,陰影,偽類設計邊框,) <!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>複習預習</title> <link href="css/font-awes

css單行多行文字溢位顯示省略號

單行文字溢位顯示省略號 overflow: hidden; text-overflow: ellipsis; white-space: nowrap; 多行文字溢位顯示省略號 overflow: hidden; text-overflow: ellip

CSS實現多行文字截斷

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>多行截斷</title> <style>

多行文字垂直左右居中

<div class="vertical-text"> <span>測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字</span> <i></i> </div> .v

完美解決多行文字垂直居中

<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>完美解決不固定行數的文字垂直居中</title> <

css3一行或多行文字垂直居中

文字容器高度固定，但容器內部文字個數不知，但要求文字部分垂直居中，利用css3的flex彈性盒子屬性可以解決。核心程式碼： .align-center-vertical{display: flex

css實現多行文字截斷效果

背景：在做響應式系統設計的時候，經常遇到需要對標題進行文字擷取的效果，如下圖所示：一、先從單行文字截斷入手一般，實現單行文字截斷比較容易，使用文字溢位text-overflow:ellipsis;就可以實現單行文字截斷了，示例如下： div {

CSS實現多行文字溢位顯示省略號

單行文字溢位顯示省略號，可以直接使用 text-overflow:ellipsis; white-space:nowrap; <!DOCTYPE html> <html lang="en"> <head> <meta charse

【轉】Android橫豎屏重力自適應

ron ati lan target 設計根據 use rpo 適應通常我們的應用只會設計成橫屏或者豎屏，鎖定橫屏或豎屏的方法是在manifest.xml文件中設定屬性android:screenOrientation為"landscape"或"portrait"：

【WPF】獲取螢幕解析度並自適應

double x = SystemParameters.WorkArea.Width;//得到螢幕工作區域寬度 double y = SystemParameters.WorkArea.Height;//得到螢幕工作區域高度 double x1= SystemParameters.Prima

【Vue】Vue移動端頁面自適應解決方案

移動端頁面自適應解決方案該方案使用相當簡單，把下面這段已壓縮過的原生JS（僅1kb，原始碼已在文章底部更新，2017/5/3）放到 HTML 的 head 標籤中即可（注:不要手動設定viewport，該方案自動幫你設定） <scri

【css】浮動的影響及解決方法(父元素無高度，而子元素有高度)

當一個元素內只包含浮動元素的時候，它會出現高度摺疊，即元素的上下底邊重合，即出現高度為0的情況，這樣會導致後面接著的內容與上面內容出現重疊現象，針對這個問題分享幾種解決方法： 1、直接給父元素設定height ul { list-style-ty

【CSS】多行文字垂直自適應居中， 相容FF，Chrome ,IE8+

相關推薦

【CSS】多行文字垂直自適應居中，相容FF，Chrome ,IE8+