• <var id="zvtmq"></var>
      <tt id="zvtmq"><pre id="zvtmq"></pre></tt>

      <font id="zvtmq"></font>

      <tt id="zvtmq"></tt>

        <var id="zvtmq"></var>
        <mark id="zvtmq"><pre id="zvtmq"><td id="zvtmq"></td></pre></mark>

        1. 
          

          <var id="zvtmq"><object id="zvtmq"><noscript id="zvtmq"></noscript></object></var><label id="zvtmq"><button id="zvtmq"><address id="zvtmq"></address></button></label>

            <tt id="zvtmq"><wbr id="zvtmq"></wbr></tt>
            <strike id="zvtmq"><output id="zvtmq"></output></strike>

          1. <del id="zvtmq"><wbr id="zvtmq"><meter id="zvtmq"></meter></wbr></del>

          2. <small id="zvtmq"></small>

            <code id="zvtmq"><rt id="zvtmq"></rt></code>
          3. <listing id="zvtmq"><object id="zvtmq"></object></listing>

                  广告
                  文章导航

                  CSS div居中效果

                  2018-8-16 00:31| 作者: admin| 查看: 870| 评论: 0|来自: 蚂蚁部落

                  设置文本、内联元素或者块级内联元素设置为居中比较简单:

                  (1).使用text-align:center可以设置为水平居中效果。

                  (2).将line-height属性值设置为容器元素高度可以实现垂直居中效果。

                  代码实例如下:

                  [HTML] 纯文本查看 复制代码运行代码
                  <!DOCTYPE html>   
                  <html>   
                  <head>   
                  <meta charset=" utf-8">   
                  <meta name="author" content="http://www.pecf.tw/" />   
                  <title>蚂蚁部落</title>
                  <style>
                  *{
                    margin:0px;
                    padding:0px;
                  }
                  body{
                    text-align:center;
                    height:600px;
                    line-height:600px;
                  }
                  span{
                    width:100px;
                    height:100px;
                    display:inline-block;
                    background-color: red;
                  }
                  </style>  
                  </head>
                  <body>
                  <span></span>
                  </body>
                  </html>

                  但是不能设置块级元素,下面就以div为例子,介绍一下如何实现块级元素居中效果。

                  一.水平居中:

                  实现水平居中代码极其简单,使用margin属性即可实现:

                  [CSS] 纯文本查看 复制代码
                  margin:0px auto;

                  完整代码实例如下:

                  [HTML] 纯文本查看 复制代码运行代码
                  <!DOCTYPE html>
                  <html lang="zh-cn">
                  <head>
                  <meta charset=" utf-8">
                  <meta name="author" content="http://www.pecf.tw/" />
                  <title>蚂蚁部落</title>
                  <style type="text/css">
                  .ant{
                    width: 150px;
                    height: 80px;
                    line-height: 80px;
                    color: blue;
                    text-align: center;
                    background-color:bisque;
                    margin:0px auto;
                  }
                  </style>
                  </head>
                  <body>
                  <div class="ant">蚂蚁部落</div>
                  </body>
                  </html>

                  特别说明:必须要显式指定div的宽度,否则不会具有居中效果。

                  二.垂直水平居中:

                  [HTML] 纯文本查看 复制代码运行代码
                  <!DOCTYPE html>
                  <html>
                  <head>
                  <meta charset=" utf-8">
                  <meta name="author" content="http://www.pecf.tw/" />
                  <title>蚂蚁部落</title>
                  <style type="text/css">
                  #box{
                    width:300px;
                    height: 200px;
                    margin: 0px auto;
                    background-color: #ccc;
                    position: relative;
                  }
                  #ant{
                    position:absolute;
                    background-color: red;
                    width:100px;
                    height:80px;
                    left:50%;
                    top:50%;
                    margin-left:-50px;
                    margin-top:-40px;
                  }
                  </style>
                  <body>
                  <div id="box">
                    <div id="ant"></div>
                  </div>
                  </body>
                  </html>

                  上面代码实现了元素垂直水平居中效果,原理也非常简单:

                  通过定位设置div的left和top属性值为50%,div的左上角是居中。

                  图示如下:

                  a:3:{s:3:\"pic\";s:43:\"portal/201809/06/101718g1mmm31qs0qp5nmm.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

                  左上角并不是整体居中,再通过负外边距,分别将元素向上和向左移动一半的高度和宽度。

                  这样就实现了div元素中心点的居中效果,如果感觉计算太麻?#24120;?#21487;以使用如下方式:

                  [HTML] 纯文本查看 复制代码运行代码
                  <!DOCTYPE html>
                  <html>
                  <head>
                  <meta charset=" utf-8">
                  <meta name="author" content="http://www.pecf.tw/" />
                  <title>蚂蚁部落</title>
                  <style type="text/css">
                  #box{
                    width:300px;
                    height: 200px;
                    margin: 0px auto;
                    background-color: #ccc;
                    position: relative;
                  }
                  #ant{
                    position:absolute;
                    background-color:red;
                    width:100px;
                    height:80px;
                    left:0;
                    right:0;
                    top:0;
                    bottom:0;
                    margin:auto;
                  }
                  </style>
                  <body>
                  <div id="box">
                    <div id="ant"></div>
                  </div>
                  </body>
                  </html>

                  上述代码同样实现了子div垂直水平居中效果,核心代码如下:

                  [CSS] 纯文本查看 复制代码
                  position:absolute;
                    left:0;
                    right:0;
                    top:0;
                    bottom:0;
                    margin:auto;

                  CSS3方式实现居中效果:

                  利用CSS3实现居中效果更为简便,仅以一段代码实例为例子。

                  更多实现居中方式可以参阅CSS3元素居中详解一章节。

                  代码实例如下:

                  [HTML] 纯文本查看 复制代码运行代码
                  <!doctype html>
                  <html>
                  <head>
                  <meta charset="utf-8">
                  <meta name="author" content="http://www.pecf.tw/" />
                  <title>蚂蚁部落</title>
                  <style>
                  #box{
                    width:300px;
                    height: 200px;
                    margin: 0px auto;
                    background-color: #ccc;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                  }
                  #ant{
                    position:absolute;
                    background-color: red;
                    width:100px;
                    height:80px;
                  }
                  </style>
                  </head>
                  <body>
                  <div id="box">
                    <div id="ant"></div>
                  </div>
                  </body>
                  </html>

                  使用flex弹性布局实现居中效果非常的便利,更多内容可以参阅相关阅读。

                  相关阅读:

                  (1).display: flex参阅CSS3 flex弹性布局一章节。

                  (2).justify-content参阅CSS justify-content属性一章节。

                  (3).align-items参阅CSS3 align-items属性一章节。

                  2

                  鲜花

                  握手

                  雷人

                  路过

                  鸡蛋

                  刚表态过的朋友 (2 人)

                  最新评论

                  返回顶部
                1. <var id="zvtmq"></var>
                    <tt id="zvtmq"><pre id="zvtmq"></pre></tt>

                    <font id="zvtmq"></font>

                    <tt id="zvtmq"></tt>

                      <var id="zvtmq"></var>
                      <mark id="zvtmq"><pre id="zvtmq"><td id="zvtmq"></td></pre></mark>

                      1. 
                        

                        <var id="zvtmq"><object id="zvtmq"><noscript id="zvtmq"></noscript></object></var><label id="zvtmq"><button id="zvtmq"><address id="zvtmq"></address></button></label>

                          <tt id="zvtmq"><wbr id="zvtmq"></wbr></tt>
                          <strike id="zvtmq"><output id="zvtmq"></output></strike>

                        1. <del id="zvtmq"><wbr id="zvtmq"><meter id="zvtmq"></meter></wbr></del>

                        2. <small id="zvtmq"></small>

                          <code id="zvtmq"><rt id="zvtmq"></rt></code>
                        3. <listing id="zvtmq"><object id="zvtmq"></object></listing>

                                快乐10分破解如何计算
                              1. <var id="zvtmq"></var>
                                  <tt id="zvtmq"><pre id="zvtmq"></pre></tt>

                                  <font id="zvtmq"></font>

                                  <tt id="zvtmq"></tt>

                                    <var id="zvtmq"></var>
                                    <mark id="zvtmq"><pre id="zvtmq"><td id="zvtmq"></td></pre></mark>

                                    1. 
                                      

                                      <var id="zvtmq"><object id="zvtmq"><noscript id="zvtmq"></noscript></object></var><label id="zvtmq"><button id="zvtmq"><address id="zvtmq"></address></button></label>

                                        <tt id="zvtmq"><wbr id="zvtmq"></wbr></tt>
                                        <strike id="zvtmq"><output id="zvtmq"></output></strike>

                                      1. <del id="zvtmq"><wbr id="zvtmq"><meter id="zvtmq"></meter></wbr></del>

                                      2. <small id="zvtmq"></small>

                                        <code id="zvtmq"><rt id="zvtmq"></rt></code>
                                      3. <listing id="zvtmq"><object id="zvtmq"></object></listing>

                                            1. <var id="zvtmq"></var>
                                                <tt id="zvtmq"><pre id="zvtmq"></pre></tt>

                                                <font id="zvtmq"></font>

                                                <tt id="zvtmq"></tt>

                                                  <var id="zvtmq"></var>
                                                  <mark id="zvtmq"><pre id="zvtmq"><td id="zvtmq"></td></pre></mark>

                                                  1. 
                                                    

                                                    <var id="zvtmq"><object id="zvtmq"><noscript id="zvtmq"></noscript></object></var><label id="zvtmq"><button id="zvtmq"><address id="zvtmq"></address></button></label>

                                                      <tt id="zvtmq"><wbr id="zvtmq"></wbr></tt>
                                                      <strike id="zvtmq"><output id="zvtmq"></output></strike>

                                                    1. <del id="zvtmq"><wbr id="zvtmq"><meter id="zvtmq"></meter></wbr></del>

                                                    2. <small id="zvtmq"></small>

                                                      <code id="zvtmq"><rt id="zvtmq"></rt></code>
                                                    3. <listing id="zvtmq"><object id="zvtmq"></object></listing>

                                                            什么彩票网站好 刘伯温四肖中特料三期必开 双色球运用尾数选号 欢乐生肖开奖结果查询 足彩探讨微信群 3d组三倍投计划 佛祖救世网单双中特 浙江十一选五开奖、结果 河南高频快赢481任三投注技巧 pk10牛牛开奖结果 济州联水原三星角球分析 山东时时彩开奖记录 刮刮乐中40万图片 青海快三走势图案 美女一码一肖中特图