首先我們先了解一下行內(nèi)元素和塊級(jí)元素

行內(nèi)元素(內(nèi)聯(lián)元素)：沒(méi)有自己的獨(dú)立空間，它是依附于其他塊級(jí)元素存在的，空間大小依附于內(nèi)容多少。行內(nèi)元素沒(méi)有度、寬度、內(nèi)外邊距等屬性。

塊級(jí)元素：占據(jù)獨(dú)立的空間，具有寬度，高度，內(nèi)外邊距等屬性。

內(nèi)聯(lián)元素(行內(nèi)元素)內(nèi)聯(lián)元素(inline element)

* a - 錨點(diǎn) * abbr - 縮寫(xiě) * acronym - 首字 * b - 粗體(不推薦) * bdo - bidi override * big

- 大字體 * br - 換行 * cite - 引用 * code - 計(jì)算機(jī)代碼(在引用源碼的時(shí)候需要) * dfn - 定義字段 * em - 強(qiáng)調(diào) *

font - 字體設(shè)定(不推薦) * i - 斜體 * img - 圖片 * input - 輸入框 * kbd - 定義鍵盤(pán)文本 * label - 表格標(biāo)簽

* q - 短引用 * s - 中劃線(不推薦) * samp - 定義范例計(jì)算機(jī)代碼 * select - 項(xiàng)目選擇 * small - 小字體文本 *

span - 常用內(nèi)聯(lián)容器，定義文本內(nèi)區(qū)塊 * strike - 中劃線 * strong - 粗體強(qiáng)調(diào) * sub - 下標(biāo) * sup - 上標(biāo) *

textarea - 多行文本輸入框 * tt - 電傳文本 * u - 下劃線 * var - 定義變量

塊元素(block element) * address - 地址 * blockquote - 塊引用 * center - 舉中對(duì)齊塊 * dir -

目錄列表 * div - 常用塊級(jí)容易，也是css layout的主要標(biāo)簽 * dl - 定義列表 * fieldset - form控制組 * form -

交互表單 * h1 - 大標(biāo)題 * h2 - 副標(biāo)題 * h3 - 3級(jí)標(biāo)題 * h4 - 4級(jí)標(biāo)題 * h5 - 5級(jí)標(biāo)題 * h6 - 6級(jí)標(biāo)題 * hr

- 水平分隔線 * isindex - input prompt * menu - 菜單列表 * noframes -

frames可選內(nèi)容，(對(duì)于不支持frame的瀏覽器顯示此區(qū)塊內(nèi)容 * noscript - )可選腳本內(nèi)容(對(duì)于不支持script的瀏覽器顯示此內(nèi)容) *

ol - 排序表單 * p - 段落 * pre - 格式化文本 * table - 表格 * ul - 非排序列表

可變?cè)?可變?cè)貫楦鶕?jù)上下文語(yǔ)境決定該元素為塊元素或者內(nèi)聯(lián)元素。 * applet - java applet * button - 按鈕 * del

- 刪除文本 * iframe - inline frame * ins - 插入的文本 * map - 圖片區(qū)塊(map) * object -

object對(duì)象 * script - 客戶(hù)端腳本

對(duì)于內(nèi)聯(lián)元素的垂直居中：在標(biāo)簽中設(shè)置veritical-align:middle;即可

http-equiv="Content-Type" content="text/html; charset=utf-8"

/>

Untitled Document

用戶(hù)名：

/>

塊級(jí)元素的垂直居中：

在此分為兩種情況 1、內(nèi)容為單行只要加上line-height=標(biāo)簽height即可

2、內(nèi)容為多行時(shí)：設(shè)置父標(biāo)簽display為table子標(biāo)簽display為table-cell

、vertical-align為middle即可

http-equiv="Content-Type" content="text/html; charset=utf-8"

/>

Untitled Document這是一個(gè)塊級(jí)內(nèi)容

http-equiv="Content-Type" content="text/html; charset=utf-8"

/>

Untitled Document

class="son">

這是一個(gè)塊級(jí)內(nèi)容

這是一個(gè)塊級(jí)內(nèi)容

原文：http://www.cnblogs.com/chuxiazhiyin/p/3573693.html

總結(jié)

以上是生活随笔為你收集整理的html块中的内容垂直居中,css如何设置行内元素与块级元素的内容垂直居中的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。