一、對于行內元素
若該行內元素只有一行,且該行內元素父元素的高度一定,可以設置該行內元素的line-height屬性,屬性值為父元素的高度。
二、對于塊元素
塊元素有兩種實現方法:設置vertical-align屬性;使用position屬性進行絕對定位。
1、在<table>元素的<td>中使用vertical屬性。
td{ vertical-align:middle;}2、對于普通的<div>元素,首先設置該<div>元素display:table-cell;然后便可以使用vertical-align屬性進行水平居中。div{ display:table-cell; vertical-align:middle;}3、可以設置行內塊級元素的vertical-align,從而設置該元素的 頂部/中部/底部 與其它行內元素對齊。<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、設置該塊級元素的position屬性
首先,設置塊級元素<div>的父元素的position:relative;其次,設置塊級元素<div>的CSS為:position:absolute;top:50%;left:50%;假設該塊級元素<div>width:200px;height:80px;最后,設置該塊級元素<div>的外邊距:margin:-40px 0px 0px -100px;//因為塊級元素<div>的絕對定位是以塊級元素<div>的左上角為基準的,所以要通過外邊距減去搜索框長和寬的一半。
新聞熱點
疑難解答