網(wǎng)頁制作中垂直居中的技巧

2016-10-27    分類： 網(wǎng)站建設(shè)

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

網(wǎng)站標題：網(wǎng)頁制作中垂直居中的技巧
文章分享：http://www.muchs.cn/news1/54851.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供服務(wù)器托管、動態(tài)網(wǎng)站、電子商務(wù)、網(wǎng)站建設(shè)、域名注冊、網(wǎng)站策劃

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)

h5響應(yīng)式網(wǎng)站建設(shè)