對于html的元素居中其實隻有兩類居中,一是塊元素居中,二是内聯元素居中。
内聯元素居中使用text-align,塊元素居中使用margin。
一、内聯元素
内聯元素居中,使用原則就是在其父元素上設置text-margin:center。
例如<span>元素居中
網頁上顯示效果為:
另外<a>标簽也是一樣
網頁上顯示效果為:
二、塊元素
塊元素居中,使用原則就是在需要居中的元素上設置margin:0 auto。
例如<div>元素居中
網頁上顯示效果為:
另外,如果塊元素已經浮動(例如float:left)居中方法
例如已經浮動了的<div>元素
網頁上顯示效果為:
上面代碼意義:
因為已經浮動了的緣故,所以采用margin:0 auto對元素已經不起作用了,所以采用position:relative,然後利用位 置top:50%與left:50%可以将元素居中,但是此時是以元素的左上角為參考點。
實際情況元素向右和向下平移了元素寬度與高度的一半,所以後面還需要加上margin:0 -50px(這個例子高度的一半為50px,以實際情況為準),如果垂直方向也要居中的話,就将0改為高度一半的相反數。
對前端感興趣的小夥伴記得關注小編,每天都會更新前端的一些小技巧。沒點贊的小夥伴記得點贊收藏哦,謝謝大家!
,