我們在實際工作中也會遇到需要設置垂直居中的場景,比如好多報紙的文章標題在左右一側時,常常會設置為垂直居中,為了用戶體驗性好。
這里我們又得分兩種情況:父元素高度確定的單行文本,以及父元素高度確定的多行文本。
本節我們先來看第一種父元素高度確定的單行文本, 怎么設置它為垂直居中呢?
**父元素高度確定的單行文本**的豎直居中的方法是通過設置父元素的?height?和[?line-height?](http://www.imooc.com/code/2083 "忘了的小伙伴,讓我們點擊鏈接復習一下吧!")高度一致來實現的。(height: 該元素的高度,line-height: 顧名思義,行高(行間距),指在文本中,行與行之間的?基線間的距離?)。
line-height 與 font-size 的計算值之差,在 CSS 中成為“行間距”。分為兩半,分別加到一個文本行內容的頂部和底部。
這種文字行高與塊高一致帶來了一個弊端:當文字內容的長度大于塊的寬時,就有內容脫離了塊。
如下代碼:
~~~
<div class="container">
hi,imooc!
</div>
~~~
css代碼:
~~~
<style>
.container{
height:100px;
line-height:100px;
background:#999;
}
</style>
~~~
### 任務
我來試試:補充右側代碼使 h2 中的文本垂直方向居中。(記得點擊右上角的全屏按鈕查看效果哦!)
```
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>垂直居中</title>
<style>
.wrap h2{
margin:0;
height:100px;
line-height:100px;
background:#ccc;
}
</style>
</head>
<body>
<!--下面是代碼任務部分-->
<div class="wrap">
<h2>hi,imooc!</h2>
</div>
</body>
</html>
```
- 1-2Html和CSS的關系
- 2-1語義化,讓你的網頁更好的被搜索引擎理解
- 2-3<q>標簽,短文本引用
- 2-8<blockquote>標簽,長文本引用
- 2-9使用<br>標簽分行顯示文本
- 2-10為你的網頁中添加一些空格
- 2-11認識<hr>標簽,添加水平橫線
- 2-12<address>標簽,為網頁加入地址信息
- 2-13想加入一行代碼嗎?使用<code>標簽
- 2-14使用<pre>標簽為你的網頁加入大段代碼
- 3-1使用ul,添加新聞信息列表(無序號排列)
- 3-2使用ol,添加圖書銷售排行榜(有序排列)
- 3-3認識div在排版中的作用
- 3-4給div命名,使邏輯更加清晰
- 3-5table標簽,認識網頁上的表格
- 3-6用css樣式,為表格加入邊框
- 3-7caption標簽,為表格添加標題和摘要
- 4-1使用<a>標簽,鏈接到另一個頁面
- 4-2在新建瀏覽器窗口中打開鏈接
- 4-3使用mailto在網頁中鏈接Email地址
- 4-4認識<img>標簽,為網頁插入圖片
- 5-1使用表單標簽,與用戶交互
- 5-2文本輸入框、密碼輸入框
- 5-3文本域,支持多行文本輸入
- 5-4使用單選框、復選框,讓用戶選擇
- 5-5使用下拉列表框,節省空間
- 5-6使用下拉列表框進行多選
- 5-7使用提交按鈕,提交數據
- 5-8使用重置按鈕,重置表單信息
- 5-9form表單中的label標簽
- 6-1認識CSS樣式
- 6-2CSS樣式的優勢
- 6-3CSS代碼語法
- 7-1內聯式css樣式,直接寫在現有的HTML標簽中
- 7-2嵌入式css樣式,寫在當前的文件中
- 7-3外部式css樣式,寫在單獨的一個文件中
- 7-4三種方法的優先級
- 8-1什么是選擇器?
- 8-2標簽選擇器(無)
- 8-3類選擇器(點)
- 8-4ID選擇器(#)
- 8-5類和ID選擇器的區別
- 8-6子選擇器(大于號)
- 8-7包含(后代)選擇器(空格)
- 8-8通用選擇器(星號)
- 8-9偽類選擇符(a然后冒號)
- 8-10分組選擇符(逗號)
- 9-1繼承(權值可為0.1)
- 9-2特殊性
- 9-3層疊
- 9-4重要性
- 10-1文字排版--字體
- 10-2文字排版--字號、顏色
- 10-3文字排版--粗體
- 10-4文字排版--斜體
- 10-5文字排版--下劃線
- 10-6文字排版--刪除線
- 10-7段落排版--縮進
- 10-8段落排版--行間距(行高)
- 10-9段落排版--中文字間距、字母間距
- 10-10段落排版--對齊
- 11-1元素分類
- 11-2元素分類--塊級元素
- 11-3元素分類--內聯元素
- 11-4元素分類--內聯塊狀元素
- 11-6盒模型--邊框(一)
- 11-7盒模型--邊框(二)
- 11-8盒模型--寬度和高度
- 11-9盒模型--填充
- 11-10盒模型--邊界
- 12-1css布局模型
- 12-2流動模型(一)
- 12-3流動模型(二)
- 12-4浮動模型
- 12-5什么是層模型?
- 12-6層模型--絕對定位
- 12-7層模型--相對定位
- 12-8層模型--固定定位
- 12-9Relative與Absolute組合使用
- 13-3字體縮寫
- 15-1水平居中設置-行內元素
- 15-2水平居中設置-定寬塊狀元素
- 15-3水平居中總結-不定寬塊狀元素方法(一)
- 15-4水平居中總結-不定寬塊狀元素方法(二)
- 15-5水平居中總結-不定寬塊狀元素方法(三)
- 15-6垂直居中-父元素高度確定的單行文本
- 15-7垂直居中-父元素高度確定的多行文本(方法一)
- 15-8垂直居中-父元素高度確定的多行文本(方法二)
- 15-9隱性改變display類型