一、對(duì)于行內(nèi)元素
若該行內(nèi)元素只有一行,且該行內(nèi)元素父元素的高度一定,可以設(shè)置該行內(nèi)元素的line-height屬性,屬性值為父元素的高度。
二、對(duì)于塊元素
塊元素有兩種實(shí)現(xiàn)方法:設(shè)置vertical-align屬性;使用position屬性進(jìn)行絕對(duì)定位。
1、在<table>元素的<td>中使用vertical屬性。
td{ vertical-align:middle;}2、對(duì)于普通的<div>元素,首先設(shè)置該<div>元素display:table-cell;然后便可以使用vertical-align屬性進(jìn)行水平居中。div{ display:table-cell; vertical-align:middle;}3、可以設(shè)置行內(nèi)塊級(jí)元素的vertical-align,從而設(shè)置該元素的 頂部/中部/底部 與其它行內(nèi)元素對(duì)齊。<head> <meta charset="UTF-8"> <title>Document</title> <style> .div1{ display: inline-block; vertical-align: middle; background-color: red; } </style></head><body> assssssfdsfsdf<div class="div1">hasdkjagsdhjagdk<br>asdasd</div>qwdasfasdf</body>4、設(shè)置該塊級(jí)元素的position屬性
首先,設(shè)置塊級(jí)元素<div>的父元素的position:relative;其次,設(shè)置塊級(jí)元素<div>的CSS為:position:absolute;top:50%;left:50%;假設(shè)該塊級(jí)元素<div>width:200px;height:80px;最后,設(shè)置該塊級(jí)元素<div>的外邊距:margin:-40px 0px 0px -100px;//因?yàn)閴K級(jí)元素<div>的絕對(duì)定位是以塊級(jí)元素<div>的左上角為基準(zhǔn)的,所以要通過(guò)外邊距減去搜索框長(zhǎng)和寬的一半。
新聞熱點(diǎn)
疑難解答
圖片精選