網頁制作中垂直居中的技巧
2016-10-27 分類： 網站建設
在實際的網頁制作過程中，網頁中有很多的東西需要我們進行垂直居中，例如文字垂直居中，多行文字垂直居中，塊級元素垂直居中，背景圖片垂直居中。今天我就給大家來說一下應該怎樣對這些東西進行垂直居中。1.單行文字垂直居中。單行文字居中的方法其實很簡單，只需要在css中給對應的父標簽設置line-height為父級標簽的高度就可以實現對單行文字的垂直居中了。而圖片也是屬于行內元素，別看它可以設定固定的寬高，line-height對img標簽也是有影響的，所以在需要對img標簽垂直居中的時候是可以使用line-height的，如果不需要line-height影響到img標簽的話，可以給img標簽設置為block，然后使用浮動屬性就可以了。2.多行文字垂直居中 多行文字垂直居中需要給每一行的文字上包一個行內快元素，或者包一個別的元素設置成行內塊就可以了。再給行內快的父元素設置line-height，而行內快元素設置寬高和里面的行高就可以了。3.塊級元素居中。塊級元素居中需要給這個塊級元素的父級設置相對定位屬性，然后給需要垂直居中的塊級元素設置絕對定位，top或者bottom值為50%；margin-top是負的這個塊級元素的高的一半就可以了。4.背景圖片垂直居中。在實際的網頁制作工作中經常會用到背景圖片，需要對背景圖片垂直居中就需要用到background-position屬性了，這個屬性后面可以填寫一個或者兩個值，一個值是水平方向上的定位，而第二個值是垂直方向上的定位，起始點是元素的左上角。如果輸入一個值得話，瀏覽器會認為水平方向和垂直方向上的值是一樣的。想要垂直居中那么就給第二個值設為center，一個值根據自己的需要來調試。以上就是關于常用的垂直居中的使用技巧，根據不同的情況使用不同的方法可以大大提升開發效率。
標題名稱：網頁制作中垂直居中的技巧
標題網址：http://www.js-pz168.com/news/54851.html
成都網站建設公司_創新互聯，為您提供網站策劃、網頁設計公司、服務器托管、手機網站建設、動態網站、App開發
聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創新互聯
猜你還喜歡下面的內容
- 網頁制作應化繁為簡 2016-10-27
- 網頁制作之：resat文件 2016-10-27
- 怎樣能延長用戶的瀏覽時間 2016-10-27
- 淺談HTML算不算是編程語言 2016-10-27
- 企業網站與博客網站的區別 2016-10-27
- 傳統的網站應該怎么來進行自適應呢？ 2016-10-27
- 企業網站如何動手news欄目 2016-10-27
- 總結前端常用編輯器的特點 2016-10-27
- 個人網站怎么盈利 2016-10-27
- 網站推廣之百度競價篇 2016-10-30
- 網站的維護主要包括那幾點呢？ 2016-10-30
- 網站開發在建設方面需要注意哪些問題了？ 2016-10-27
- 網頁中頭部以及各文件的引入順序 2016-10-27
- 怎樣科學又高效的建立一個網站 2016-10-27
- 如何制作低跳出率高品質的網站 2016-10-27
- 高大上的網站就是不一樣 2016-10-27
- 學校和教育機構為什么要建設網站 2016-10-27
- 網頁制作為什么要將頁面中的標簽，樣式和JS分開來寫 2016-10-27
- 網站售后服務一般都長時間結束 2016-10-27