R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R

      <noframes id="LVXRHZN"><address id="LVXRHZN"><nobr id="LVXRHZN"></nobr></address>

      <noframes id="LVXRHZN"><noframes id="LVXRHZN"><address id="LVXRHZN"><listing id="LVXRHZN"></listing></address>
      <sub id="LVXRHZN"></sub>

        <sub id="LVXRHZN"></sub>
        <address id="LVXRHZN"><listing id="LVXRHZN"><menuitem id="LVXRHZN"></menuitem></listing></address>

        <sub id="LVXRHZN"></sub>

        <address id="LVXRHZN"></address>

        <address id="LVXRHZN"></address>
        <noframes id="LVXRHZN">

          <noframes id="LVXRHZN">
          <sub id="LVXRHZN"></sub>
              <address id="LVXRHZN"><listing id="LVXRHZN"><menuitem id="LVXRHZN"></menuitem></listing></address>
            1. 820466150 2017-11-04
            2. 388113149 2017-11-04
            3. 740898148 2017-11-04
            4. 892683147 2017-11-04
            5. 540252146 2017-11-04
            6. 888745145 2017-11-04
            7. 981419144 2017-11-04
            8. 544637143 2017-11-04
            9. 454205142 2017-11-04
            10. 212476141 2017-11-04
            11. 39821140 2017-11-04
            12. 170835139 2017-11-03
            13. 37766138 2017-11-03
            14. 538854137 2017-11-03
            15. 926181136 2017-11-03
            16. 18188135 2017-11-03
            17. 420335134 2017-11-03
            18. 553276133 2017-11-03
            19. 4149132 2017-11-02
            20. 883561131 2017-11-02
            21. 891189130 2017-11-02
            22. 649552129 2017-11-02
            23. 950957128 2017-11-02
            24. 295914127 2017-11-02
            25. 781243126 2017-11-02
            26. 682892125 2017-11-02
            27. 829649124 2017-11-02
            28. 168426123 2017-11-01
            29. 406171122 2017-11-01
            30. 724134121 2017-11-01
            31. “砥砺奋进的五年”大型成就展
            32. “总书记的回信说到了我们心坎上”
            33. 德媒:拒绝“洋垃圾”——肮脏的游戏,中国不玩了
            34. 求实创造 为人师表
            35. 家长群里质疑老师收礼排座位 被班主任踢出家长群
            36. 两手抓两促进 打造坚强战斗堡垒
            37. 新论:党章,每个党员都需时刻铭记
            38. 谁击落了MH17?各方互相指责
            39. 互联网用户公众账号信息服务管理规定
            40. 台籍律师在大陆 就业+创业不是“梦”
            41. 法国总统说政治对话是保证叙利亚实现可持续和平的唯一办法
            42. 天胶“保险+期货”精准扶贫首批给付500万 惠及云南临沧400余建档贫困户
            43. [征集]资深网友看这里 新时代老人们希望何种"夕阳红"
            44. 近千家A股公司三季报业绩预喜
            45. 台媒吹台特种兵“斩首”能力一流:堪比海豹三角洲
            46. 欢迎来到DIVCSS5查找CSS资料与学习DIV CSS布局技术!
              您的位置:DIVCSS5学习网 > CSS技巧 >

              css布局居中和CSS内容居中区别和对应DIV CSS代码

              css布局居中和CSS内容居中区别和对应DIV CSS代码教程与图文代码案例篇

              对于新手来说DIV CSS布局居中与DIV CSS内容居中常常搞混,摸不着头脑。这里DIVCSS5重点为介绍关于布局居中与内容居中区别、CSS代码、作用、用法,通过基础知识介绍到DIV CSS图文代码案例让大家通俗易懂掌握这两个概念知识点。

              对于DIVCSS5学习网开发来说DIVCSS5学习网居中与DIVCSS5学习网内容居中是入门碰到最重要需要必须掌握知识点。

              一、认识布局居中与内容居中   -   TOP

              1、DIVCSS5学习网布局居中
              布局居中是对框架盒子本身设置。让网页主体水平居中于浏览器中,就需设置margin:0 auto实现布局居中。

              布局居中针对框架盒子本身居中。

              布局居中主要是对布局框架设置比如(DIV盒子)设置。一般网页布局中最外层主体框架设置布局居中样式(margin:0 auto)实现。如果不设置布局居中代码,其有的浏览器中主体是居中的,但有的浏览器中靠左显示,引起兼容性问题,所以要让一个盒子水平居中于浏览器中就必须设置一个margin:0 auto样式。

              特点:实现居中非常特别使用margin样式实现,需要特别注意。

              2、CSS DIV内容居中
              和DIV布局居中有着同样居中字眼的内容居中,则是对盒子里内容(文字、图片等内容)实现水平居中。使用CSS样式单词与值代码为text-align:center。不管是对div标签、h1标签、h2标签、p标签html元素标签设置都能让其对于盒子里内容水平居中。

              扩展CSS代码:
              CSS内容居中:text-align:center
              CSS内容靠左:text-align:left
              CSS内容靠右:text-align:right

              二、 两者本质区别   -   TOP

              CSS布局居中:对框架设置水平居中(比如对DIVCSS5学习网本身设置DIV水平居中于浏览器中)。

              CSS内容居中:对盒子里的内容设置水平居中(比如DIV内放到图片、文字等内容)

              三、应用目的   -   TOP

              CSS布局居中实现主体水平居中于浏览器;CSS内容居中实现框架盒子内的内容居中。拿DIVCSS5学习网来说,前者对DIV框架盒子本身设置水平居中,后者对DIV里装的内容水平居中。

              四、居中简单图文案例   -   TOP

              1、布局居中
              为了能观察到布局居中效果,我们对一个DIV设置css宽度300px;css高100px;CSS边框为红色,并设置布局居中代码margin:0 auto

              1)、完整DIV CSS代码

              1. <!DOCTYPE html> 
              2. <html> 
              3. <head> 
              4. <meta charset="utf-8" /> 
              5. <title>简单布局实例 DIVCSS5</title> 
              6. <style> 
              7. .divcss5{ margin:0 auto; width:300px; height:100px; border:1px solid #F00} 
              8. </style> 
              9. </head> 
              10. <body> 
              11. <div class="divcss5">布局居中简单实例</div> 
              12. </body> 
              13. </html> 

              2)、布局居中效果截图

              DIV CSS布局居中实例效果图
              DIV CSS布局居中实例效果截图

              2、内容居中
              为了能观察到内容居中、居左、居右效果,我们设置3个div盒子同样宽度300px;高100px;CSS边框为红色,分别设置居中、居右、居左样式。

              1)、完整HTML代码(DIV CSS代码)

              1. <!DOCTYPE html> 
              2. <html> 
              3. <head> 
              4. <meta charset="utf-8" /> 
              5. <title>简单内容居中与布局居中实例 DIVCSS5</title> 
              6. <style> 
              7. .divcss5{margin:0 auto;width:300px;height:100px;border:1px solid #F00;text-align:center;} 
              8. </style> 
              9. </head> 
              10. <body> 
              11. <div class="divcss5">布局居中 与 内容居中简单实例</div> 
              12. </body> 
              13. </html> 

              加了text-align:center即可实现让盒子内内容居中

              2)、内容居中效果截图

              实现CSS内容居中效果图
              实现CSS内容居中效果截图

              五、详细相关案例代码   -   TOP

              1、DIV CSS布局居中相关案例与教程:

              2、DIV CSS内容居中相关案例与教程

              如需转载,请注明文章出处和来源网址:http://www.tommstudio.com/jiqiao/j771.shtml

              我要分享到:

              必备CSS教程 Essential CSS Tutorials

              必备HTML基础教程 Essential HTML Tutorials

              如对文章有任何疑问请提交到DIV CSS论坛,或有任何网页制作CSS问题立即到CSS论坛发贴求解 或 直接DIVCSS5网页顶部搜索遇到DIVCSS疑问。
              DIVCSS5学习网文章修订日期:2015-01-19 09:03 原创:DIVCSS5学习网
              本文www.tommstudio.com DIVCSS5版权所有。