網(wǎng)頁制作中垂直居中的技巧
發(fā)布時間:2019-03-29來源:admin
在實際的網(wǎng)頁制作過程中,網(wǎng)頁中有很多的東西需要我們進行垂直居中,例如文字垂直居中,多行文字垂直居中,塊級元素垂直居中,背景圖片垂直居中。今天我就給大家來說一下應該怎樣對這些東西進行垂直居中。<br />
1.單行文字垂直居中。單行文字居中的方法其實很簡單,只需要在css中給對應的父標簽設置line-height為父級標簽的高度就可以實現(xiàn)對單行文字的垂直居中了。而圖片也是屬于行內元素,別看<br />
它可以設定固定的寬高,line-height對img標簽也是有影響的,所以在需要對img標簽垂直居中的時候是可以使用line-height的,如果不需要line-height影響到img標簽的話,可以給img標簽<br />
設置為block,然后使用浮動屬性就可以了。<br />
2.多行文字垂直居中 多行文字垂直居中需要給每一行的文字上包一個行內快元素,或者包一個別的元素設置成行內塊就可以了。再給行內快的父元素設置line-height,而行內快元素設置寬高和里面的行高就可以了。<br />
3.塊級元素居中。塊級元素居中需要給這個塊級元素的父級設置相對定位屬性,然后給需要垂直居中的塊級元素設置絕對定位,top或者bottom值為50%;margin-top是負的這個塊級元素的高的一半就可以了。<br />
4.背景圖片垂直居中。在實際的網(wǎng)頁制作工作中經(jīng)常會用到背景圖片,需要對背景圖片垂直居中就需要用到background-position屬性了,這個屬性后面可以填寫一個或者兩個值,第一個值是水平方向上的定位,<br />
而第二個值是垂直方向上的定位,起始點是元素的左上角。如果輸入一個值得話,瀏覽器會認為水平方向和垂直方向上的值是一樣的。想要垂直居中那么就給第二個值設為center,第一個值根據(jù)自己的需要來調試。<br />
以上就是關于常用的垂直居中的使用技巧,根據(jù)不同的情況使用不同的方法可以大大提升開發(fā)效率。<br />
聯(lián)系方式: 0755-84185494