在實(shí)際的網(wǎng)頁(yè)制作過(guò)程中,網(wǎng)頁(yè)中有很多的東西需要我們進(jìn)行垂直居中,例如文字垂直居中,多行文字垂直居中,塊級(jí)元素垂直居中,背景圖片垂直居中。今天我就給大家來(lái)說(shuō)一下應(yīng)該怎樣對(duì)這些東西進(jìn)行垂直居中。1.單行文字垂直居中。單行文字居中的方法其實(shí)很簡(jiǎn)單,只需要在css中給對(duì)應(yīng)的父標(biāo)簽設(shè)置line-height為父級(jí)標(biāo)簽的高度就可以實(shí)現(xiàn)對(duì)單行文字的垂直居中了。而圖片也是屬于行內(nèi)元素,別看它可以設(shè)定固定的寬高,line-height對(duì)img標(biāo)簽也是有影響的,所以在需要對(duì)img標(biāo)簽垂直居中的時(shí)候是可以使用line-height的,如果不需要line-height影響到img標(biāo)簽的話(huà),可以給img標(biāo)簽設(shè)置為block,然后使用浮動(dòng)屬性就可以了。2.多行文字垂直居中 多行文字垂直居中需要給每一行的文字上包一個(gè)行內(nèi)快元素,或者包一個(gè)別的元素設(shè)置成行內(nèi)塊就可以了。再給行內(nèi)快的父元素設(shè)置line-height,而行內(nèi)快元素設(shè)置寬高和里面的行高就可以了。3.塊級(jí)元素居中。塊級(jí)元素居中需要給這個(gè)塊級(jí)元素的父級(jí)設(shè)置相對(duì)定位屬性,然后給需要垂直居中的塊級(jí)元素設(shè)置絕對(duì)定位,top或者bottom值為50%;margin-top是負(fù)的這個(gè)塊級(jí)元素的高的一半就可以了。4.背景圖片垂直居中。在實(shí)際的網(wǎng)頁(yè)制作工作中經(jīng)常會(huì)用到背景圖片,需要對(duì)背景圖片垂直居中就需要用到background-position屬性了,這個(gè)屬性后面可以填寫(xiě)一個(gè)或者兩個(gè)值,一個(gè)值是水平方向上的定位,而第二個(gè)值是垂直方向上的定位,起始點(diǎn)是元素的左上角。如果輸入一個(gè)值得話(huà),瀏覽器會(huì)認(rèn)為水平方向和垂直方向上的值是一樣的。想要垂直居中那么就給第二個(gè)值設(shè)為center,一個(gè)值根據(jù)自己的需要來(lái)調(diào)試。以上就是關(guān)于常用的垂直居中的使用技巧,根據(jù)不同的情況使用不同的方法可以大大提升開(kāi)發(fā)效率。
標(biāo)題名稱(chēng):網(wǎng)頁(yè)制作中垂直居中的技巧
標(biāo)題網(wǎng)址:http://redsoil1982.com.cn/news/54851.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供網(wǎng)站策劃、網(wǎng)頁(yè)設(shè)計(jì)公司、服務(wù)器托管、手機(jī)網(wǎng)站建設(shè)、動(dòng)態(tài)網(wǎng)站、App開(kāi)發(fā)
廣告
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如需處理請(qǐng)聯(lián)系客服。電話(huà):028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來(lái)源:
創(chuàng)新互聯(lián)