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

        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號
        主站蜘蛛池模板: 国产精品永久免费| 亚洲精品乱码久久久久久蜜桃| 欧美+亚洲+精品+三区| 国产精品免费一区二区三区| 久久亚洲精品成人av无码网站| 久久精品国产亚洲7777| 欧美一区二区精品| 国产精品免费无遮挡无码永久视频| 日本加勒比久久精品| 国产高清精品一区| 99热精品在线观看| 久久99精品国产麻豆| 一本久久a久久精品vr综合| 精品久久久久久无码人妻蜜桃| 久久免费精品视频| 国产精品精品自在线拍| 无码人妻精品一区二区三区在线 | 精品国产品香蕉在线观看75| 狼色精品人妻在线视频| 日韩精品亚洲专区在线观看| 久久精品成人一区二区三区| 国产精品最新国产精品第十页| 国产成人精品a视频一区| 欧美精品国产精品| 四虎永久在线精品国产免费| 欧美亚洲国产精品久久蜜芽| 青青青国产精品国产精品久久久久 | 久久精品毛片免费观看| 亚洲精品无码专区在线播放| 午夜福利麻豆国产精品 | 99久久精品国产高清一区二区| 国产午夜福利精品一区二区三区| 婷婷精品国产亚洲AV麻豆不片| 亚洲欧洲自拍拍偷精品 美利坚| 日本精品自产拍在线观看中文| 老司机精品影院91| 欧美午夜精品久久久久久浪潮| 久久伊人精品青青草原日本 | 国产成人亚洲合集青青草原精品| 2020亚洲男人天堂精品| 国产精品臀控福利在线观看|