亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

關于css水平居中的小小探討

  發(fā)布時間：2016-06-29 09:43:29   作者：佚名   我要評論
下面小編就為大家?guī)硪黄P于css水平居中的小小探討。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧

水平居中是常用的幾種布局方式之一。主要分為行內(nèi)元素的居中，塊元素的居中。塊元素的居中還分為固定寬度的居中，不定寬度的居中。行內(nèi)元素的居中，使用text-align:center就可以實現(xiàn)，已知寬度的塊元素的居中，使用絕對定位以及設置
margin為寬的一半的負值就可以實現(xiàn)。但是不定寬度的居中比起上面兩種更常用，也更復雜，我們常常需要在分頁的頁碼展示等地方用到不定寬居中，使用起來更方便，下面來研究下常用的幾種塊元素的水平居中。

1.標簽嵌套偏移

實現(xiàn)原理：

聯(lián)想到固定寬度的居中的實現(xiàn)：先偏移到屏幕中央，在設置其margin方向偏移寬的一半。那么能不能想到一種方法，借用這種思路，先偏移50%到屏幕的右半部分，然后在反方向偏移回來？實現(xiàn)起來比較困難的點是不知道這個寬度是多少。又想到只要讓其父寬度和子寬度相等，然后用百分數(shù)就可以解決。那么怎么讓其父寬度和字寬度一樣呢？巧借float具有的包裹性：父元素如果漂浮了，并且沒有設置寬高，那么將盡量包裹子元素。

實現(xiàn)代碼：

XML/HTML Code復制內(nèi)容到剪貼板
  1. <!DOCTYPE html>  
  2. <html lang="en">  
  3. <head>  
  4.     <meta charset="UTF-8">  
  5.     <title>不定寬度水平居中</title>  
  6.     <style>  
  7.         body{  
  8.             background-color: #e5da31;  
  9.         }  
  10.         .container{  
  11.             position: absolute;   /*脫離文檔流，其寬度將由子元素的寬度決定*/  
  12.             left:50%;  
  13.         }  
  14.         .content{  
  15.             position: absolute;  
  16.             left:-50%;  
  17.             background-color: #2ecc71;  
  18.         }  
  19.     </style>  
  20. </head>  
  21. <body>  
  22. <div class="container">  
  23.     <div class="content">標簽嵌套</div>  
  24. </div>  
  25. </body>  
  26. </html>  

實現(xiàn)效果：

chabaoo.cn

優(yōu)點與缺點：
缺點很明顯，需要自己寫和文檔內(nèi)容無關的標簽，多打了那么幾行代碼兼容性良好，在ie6+瀏覽器上查看沒有問題
2.flex-box布局
實現(xiàn)原理：
先定義一個flex容器，然后設置其內(nèi)容對齊方式為中間對齊
XML/HTML Code復制內(nèi)容到剪貼板
  1. <!DOCTYPE html>  
  2. <html lang="en">  
  3. <head>  
  4.     <meta charset="UTF-8">  
  5.     <title>不定寬度水平居中</title>  
  6.     <style>  
  7.         body {  
  8.             background-color: #e5da31;  
  9.         }  
  10.         .container {  
  11.             display: flex;  /*定義一個flex容器*/  
  12.             justify-content: center;  /*定義容器的空間沒有被全部占用時，內(nèi)容的對其方式*/  
  13.         }  
  14.         .content{  
  15.             background-color: #2ecc71;  
  16.         }  
  17.     </style>  
  18. </head>  
  19. <body>  
  20. <div class="container">  
  21.     <div class="content">標簽嵌套</div>  
  22. </div>  
  23. </body>  
  24. </html>  
實現(xiàn)效果：
chabaoo.cn
優(yōu)缺點分析：
實現(xiàn)起來最簡單，但是呢，因為flex的兼容性不好，當要兼容低階瀏覽器時慎重使用。
3.內(nèi)聯(lián)布局
實現(xiàn)原理：
text-align:center可以讓行內(nèi)元素水平居中，如果改變塊元素為行內(nèi)元素，在使用text-align就可以實現(xiàn)水平居中。
實現(xiàn)代碼：
XML/HTML Code復制內(nèi)容到剪貼板
  1. <!DOCTYPE html>  
  2. <html lang="en">  
  3. <head>  
  4.     <meta charset="UTF-8">  
  5.     <title>不定寬度水平居中</title>  
  6.     <style>  
  7.         body{  
  8.             background-color: #e5da31;  
  9.         }  
  10.         .container{  
  11.           text-align:center;  
  12.         }  
  13.         .content{  
  14.         display: inline;  
  15.             background-color: #2ecc71;  
  16.         }  
  17.     </style>  
  18. </head>  
  19. <body>  
  20. <div class="container">  
  21.     <div class="content">標簽嵌套</div>  
  22. </div>  
  23. </body>  
  24. </html>  

實現(xiàn)效果：

chabaoo.cn 

優(yōu)缺點分析：

用本來是修飾文字對齊方式的text-align來實現(xiàn)水平居中總感覺有點別扭，這塊外面的container也先多余，但是為了不影響body內(nèi)其他元素的局部，暫且如此。另外兼容性不錯，在ie6+可以正常顯示。

以上就是小編為大家?guī)淼年P于css水平居中的小小探討全部內(nèi)容了，希望大家多多支持腳本之家~

原文地址：http://www.cnblogs.com/shibazijiang/archive/2016/06/28/5624831.html

相關文章

  • 淺談css處理水平居中的問題

    下面小編就為大家?guī)硪黄獪\談css處理水平居中的問題。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧，祝大家游戲愉快哦
    2016-09-04

  • Flexbox制作CSS布局實現(xiàn)水平垂直居中的簡單實例

    下面小編就為大家?guī)硪黄狥lexbox制作CSS布局實現(xiàn)水平垂直居中的簡單實例。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
    2016-07-27

  • css水平居中的各種方法總結(推薦)

    下面小編就為大家?guī)硪黄猚ss水平居中的各種方法總結(推薦)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
    2016-06-03

  • 淺析CSS實現(xiàn)水平垂直同時居中的5種思路

    下面小編就為大家?guī)硪黄獪\析CSS實現(xiàn)水平垂直同時居中的5種思路。小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考，一起跟隨小編過來看看吧
    2016-04-28

  • CSS實現(xiàn)水平居中的4種思路簡要概述

    水平居中是經(jīng)常遇到的問題。看似方法較多，條條大路通羅馬。但系統(tǒng)梳理下，其實都圍繞著幾個思路展開。本文將介紹關于水平居中的4種思路，感興趣的朋友參考下吧
    2016-04-27

  • css三種方法實現(xiàn)div在瀏覽器水平居中

    這篇文章主要介紹了css三種實現(xiàn)div在瀏覽器水平居中的方法，感興趣的小伙伴們可以參考一下
    2016-04-14

  • CSS水平居中總結(新手必看篇)

    下面小編就為大家?guī)硪黄狢SS水平居中總結(新手必看篇)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
    2016-09-08

最新評論