站長資訊網
        最全最豐富的資訊網站

        css居中對齊怎么設置

        css居中對齊的設置方法:1、水平居中【text-align:center】;2、水平居中【margin:0 auto】;3、垂直居中【line-height】;4、使用表格,水平、垂直居中;5、彈性布局,水平、垂直居中。

        css居中對齊怎么設置

        本教程操作環境:windows7系統、css3版,DELL G3電腦。

        css居中對齊的設置方法:

        1、text-align:center —— 水平居中

        僅對文字、圖片、按鈕等行內元素有效(display設置為inline或inline-block等)進行水平居中

        2、margin:0 auto; —— 水平居中

        僅水平居中,且對浮動元素定位無效

         .father{            width:500px;            height:200px;            background-color::#f98769;            overflow:hidden;//不可缺少否則margin-top不生效        }         .son{             width: 100px;             height: 100px;             margin:50px auto ;             background-color: #ff0000;         }

        3、line-height —— 垂直居中

        line-height=height ,僅對一行文字有效

        4、使用表格 —— 水平、垂直居中

        對td/th的align=‘center’和valign=‘middle’兩屬性可以水平和垂直居中

        5、彈性布局 —— 水平、垂直居中

        .father{ display:flex; justity-content:center; align-items:center; } .father{ display:flex; flex-direction:column;//改變主軸為cross axis justity-content:center; }

        6、使用display:table-cell —— 水平、垂直居中

        對于那些不是表格的元素,我們可以通過display:table-cell 來把它模擬成一個表格單元格

        .father{     height:300px;     background:#ccc;     display:table-cell; /*IE8以上及Chrome、Firefox*/     vertical-align:middle; /*IE8以上及Chrome、Firefox*/     text-align:center;  }  .son{  display:inline-block;//或是inline  }

        7、奇淫技巧——子絕父相(已知子元素寬高) —— 水平、垂直居中

        .father{ position:relative; } .son{//m、n為子盒子寬、高的一半 position:absolute; left:50%; top:50%; margin-left:-mpx; margin-top:-npx;

        8、未知子元素寬高 —— 水平、垂直居中

        .father {     position:relative; } .son {     position:absolute;     top:50%;     left:50%:     transform:translate(-50%,-50%) /*單獨設置transform:translateY(-50%);*/ }

        9、偽元素法 —— 垂直居中

        .father{     position: relative; } .father::before{     content: " ";     display: inline-block;     height: 100%;     width: 1%;     vertical-align: middle; } .son{     display: inline-block;     vertical-align: middle; }

        相關教程推薦:CSS視頻教程

        贊(0)
        分享到: 更多 (0)
        網站地圖   滬ICP備18035694號-2    滬公網安備31011702889846號
        主站蜘蛛池模板: 久久精品国产亚洲Aⅴ香蕉| 国产精品户外野外| 99久久99久久精品免费看蜜桃 | 久久99亚洲综合精品首页| 99久久精品国产免看国产一区| 一色屋精品视频在线观看| 国精品无码A区一区二区| 亚洲国产精品无码久久久久久曰 | 国产精品人人爽人人做我的可爱 | 亚洲一日韩欧美中文字幕欧美日韩在线精品一区二 | 亚欧洲精品在线视频免费观看| 无码精品久久久久久人妻中字| 99久re热视频这里只有精品6| 精品无码人妻一区二区三区品 | 亚洲国产精品不卡在线电影| 无码精品人妻一区二区三区漫画| 国产精品单位女同事在线| 国产麻豆一精品一AV一免费| 日本加勒比久久精品| 国产精品H片在线播放| 精品九九久久国内精品| 日韩一区精品视频一区二区| 精品人妻一区二区三区毛片 | 久久九九久精品国产免费直播| 国产日韩一区在线精品欧美玲| 亚洲精品久久久www| 国产精品美女久久久久av爽| 蜜国产精品jk白丝AV网站| 免费看污污的网站欧美国产精品不卡在线观看 | 亚洲?V乱码久久精品蜜桃 | 国产精品视频久久| 色欲国产麻豆一精品一AV一免费| 久久久WWW成人免费精品| 亚洲国产精品人久久| 国产精品视频白浆免费视频| 亚洲国产精品嫩草影院在线观看| 国产色婷婷精品综合在线| 中文字幕亚洲精品| 国产精品电影在线观看| 午夜精品乱人伦小说区| 亚洲精品无码不卡在线播HE |