精华内容
下载资源
问答
  • 关于网页设计制作(布局)过程中,如果让内容居中,分为以下几种情况:1、文本,图片等内联元素的水平居中。text-align:center2、定宽的块状元素在浏览器窗口或父容器中水平居中。margin:0 auto3、不定宽块状元素...

    关于网页设计制作(布局)过程中,如果让内容居中,分为以下几种情况:

    1、文本,图片等内联元素的水平居中。text-align:center

    2、定宽的块状元素在浏览器窗口或父容器中水平居中。margin:0 auto

    3、不定宽块状元素水平居中

        方案一:给父元素添加display:table;将box转换为表格形式,将不定宽转换为定宽,然后设置左右margin为auto

       方案二:将子元素转换为内联块状元素,给父元素设置text-align:center;

    4、不定宽高的元素在屏幕窗口水平垂直都居中

    5、不定宽高元素在父元素中水平垂直都居中

    -----------------------------以下为详细内容-------------------------------------------------

    1、文本,图片等内联元素的水平居中。

           如果被设置元素为文本、图片等行内元素时,水平居中是通过给父元素设置text-align:center;来实现的。

        如:

    [html] view plain copy
    1. <style type="text/css">  
    2. .imgBox{  
    3. <span style="white-space:pre;"> </span>border: 1px solid black;  
    4. <span style="white-space:pre;"> </span>text-align: center;  
    5. }  
    6. h1{  
    7. <span style="white-space:pre;"> </span>border: 1px solid black;  
    8. <span style="white-space:pre;"> </span>text-align: center;  
    9. }  
    10. .menu{  
    11. <span style="white-space:pre;"> </span>border: 1px solid black;  
    12. <span style="white-space:pre;"> </span>text-align: center;  
    13. }  
    14. form{  
    15. <span style="white-space:pre;"> </span>border: 1px solid black;  
    16. <span style="white-space:pre;"> </span>text-align: center;  
    17. }  
    18. </style>  
    19. </head>  
    20. <body>  
    21.     <!-- 一张图片在父容器中水平居中 -->  
    22.     <div class="imgBox">  
    23.         <img src="img/pic2.png"/>  
    24.         <span style="background-color: red;">我是span</span>  
    25.     </div>  
    26.     <!-- 文本内容在父容器中水平居中 -->  
    27.     <h1>我是标题</h1>  
    28.     <!-- 内联元素在父容器中水平居中 -->  
    29.     <div class="menu">  
    30.         <a href="#">新闻资讯</a>  
    31.         <a href="#">课程介绍</a>  
    32.         <a href="#">关于我们</a>  
    33.         <a href="#">在线留言</a>  
    34.         <a href="#">师资力量</a>  
    35.         <a href="#">联系我们</a>  
    36.     </div>  
    37.     <form action="">  
    38.         <input type="text"/>  
    39.         <input type="submit" value="百度一下"/>  
    40.     </form>  
    41. </body>  
    42. </html>  

    2、定宽的块状元素在浏览器窗口或父容器中水平居中。margin:0 auto

    [html] view plain copy
    1. <style type="text/css">  
    2. body,div,p,ol,ul,li,dl,dt,dd,form,table,tr,td,h1,h2,h3,h4,h5,h6,hr,figure,input,textarea{  
    3.     margin: 0;  
    4.     padding: 0;  
    5. }  
    6. .header{  
    7.     width: 100%;  
    8.     height: 100px;  
    9.     background: black;  
    10. }  
    11. .header_con{  
    12.     width: 1000px;  
    13.     height: 100px;  
    14.     background: red;  
    15.     margin:0 auto;  
    16. }  
    17. </style>  
    18. </head>  
    19. <body>  
    20. <!-- 定宽块状元素在浏览器窗口或父容器中水平居中 -->  
    21.     <div class="header">  
    22.         <div class="header_con"></div>  
    23.     </div>  
    24. <!-- 总结:满足定宽和块状两个条件的元素是可以通过设置“左右margin”值为“auto”来实现居中的 -->  
    25. </body>  

    3、不定宽块状元素水平居中

        方案一:给父元素添加display:table;将box转换为表格形式,将不定宽转换为定宽,然后设置左右margin为auto

    [html] view plain copy
    1. <style type="text/css">  
    2.   
    3. .box1{  
    4.     display: table;  
    5.     margin:0 auto;  
    6. }  
    7. .box1 a{  
    8.     display: block;  
    9.     float: left;  
    10.     padding:3px 5px;  
    11. }  
    12.   
    13. </style>  
    14. </head>  
    15. <body>  
    16. <!-- 网页中的分页效果,分页的页数不定,但是始终是居中的效果,如何实现? -->  
    17. <!-- 方案一:给父元素添加display:table;将box转换为表格形式,将不定宽转换为定宽,然后设置左右margin为auto -->  
    18. <!-- 当我们随意改变a的数量时,会发现他们始终是居中的 -->  
    19.     <div class="box box1">  
    20.         <a href="#">首页1</a>  
    21.         <a href="#">上一页</a>  
    22.         <a href="#">1</a>  
    23.         <a href="#">2</a>  
    24.         <a href="#">3</a>  
    25.         <a href="#">4</a>  
    26.         <a href="#">5</a>  
    27.         <a href="#">下一页</a>  
    28.         <a href="#">尾页</a>  
    29.     </div>  
    30. </body>  
    31. </html>  

    方案二:

    将子元素转换为内联块状元素,给父元素设置text-align:center;

    [html] view plain copy
    1. <style type="text/css">  
    2. .box2{  
    3.     margin-top: 50px;  
    4.     text-align: center;  
    5. }  
    6.   
    7. .box2 a{  
    8.     padding:3px 5px;  
    9.     border: 1px solid blue;  
    10.     margin:0 3px;  
    11.     text-decoration: none;  
    12.     color: #333;  
    13.     font-size: 12px;  
    14.     display: inline-block;  
    15. }  
    16. </style>  
    17. </head>  
    18. <body>  
    19. <!-- 网页中的分页效果,分页的页数不定,但是始终是居中的效果,如何实现? -->  
    20.   
    21. <!-- 方案二:将a转换为内联块状元素,给父元素设置text-align:center; -->  
    22.    <div class="box box2">  
    23.         <a href="#">首页</a><a href="#">上一页</a><a href="#">1</a><a href="#">2</a><a href="#">3</a><a href="#">4</a><a href="#">5</a><a href="#">下一页</a><a href="#">尾页</a>  
    24.     </div>  
    25. </body>  
    26. </html>  

    4、不定宽高的元素在屏幕窗口水平垂直都居中

    [html] view plain copy
    1. <style type="text/css">  
    2. /*body,div,p,ol,ul,li,dl,dt,dd,form,table,tr,td,h1,h2,h3,h4,h5,h6,hr,figure,input,textarea{  
    3.     margin: 0;  
    4.     padding: 0;  
    5. }*/  
    6.   
    7. /*方案一:屏幕窗口的居中,使用固定定位,将四个方向的值全部设置为0,然后设置margin为auto,自动计算上下左右的margin值*/  
    8. .imgs{  
    9.     position: fixed;  
    10.     left: 0;  
    11.     right: 0;  
    12.     top: 0;  
    13.     bottom: 0;  
    14.     margin:auto;  
    15. }  
    16.   
    17.   
    18. /*方案二*/  
    19. /*使用弹性盒的方式实现,首先给html,body设置宽度为100%,然后给body设置主轴,交叉轴对齐方式为center*/  
    20. /*html,body{  
    21.     height: 100%;  
    22. }  
    23. body{  
    24.     display: flex;  
    25.     justify-content: center;  
    26.     align-items: center;  
    27. }*/  
    28.   
    29. /*方案三*/  
    30. /*使用css3中transform变形中的translate来实现水平垂直都居中*/  
    31. /*.imgs{  
    32.     position: fixed;  
    33.     left: 50%;  
    34.     top: 50%;  
    35.     transform: translate(-50%,-50%);  
    36. }*/  
    37. </style>  
    38. </head>  
    39. <body>  
    40.     <img class="imgs" src="img/pic2.png"/>  
    41. </body>  
    42. </html>  


    5、不定宽高元素在父元素中水平垂直都居中

    [html] view plain copy
    1. <style type="text/css">  
    2.   
    3. /*.father{  
    4.     width: 800px;  
    5.     height: 500px;  
    6.     background: gray;  
    7.     position: relative;  
    8. }*/  
    9. /*方案一:给父元素相对定位,给子元素绝对定位*/  
    10. /*.imgs{  
    11.     position: absolute;  
    12.     left: 0;  
    13.     top: 0;  
    14.     right: 0;  
    15.     bottom: 0;  
    16.     margin: auto;  
    17. }*/  
    18.   
    19. /*方案二:使用css3的translate实现*/  
    20.   
    21. /*.imgs{  
    22.     position: absolute;  
    23.     left: 50%;  
    24.     top: 50%;  
    25.     transform:translate(-50%,-50%);  
    26. }*/  
    27.   
    28. /*方案三:非父元素设置table-cell,将父元素转换为表格单元格形式*/  
    29.   
    30. /*.father{  
    31.     width: 800px;  
    32.     height: 500px;  
    33.     background: gray;  
    34.     display: table-cell;  
    35.     text-align: center;  
    36.     vertical-align: middle;  
    37. }  
    38. .imgs{  
    39.     vertical-align: bottom;  
    40. }*/  
    41.   
    42. /*方案四:给img添加一个参照物span,并设置高度为100%*/  
    43. /*.father{  
    44.     width: 800px;  
    45.     height: 500px;  
    46.     background: gray;  
    47.     text-align: center;  
    48. }  
    49. .father span{  
    50.     display: inline-block;  
    51.     width: 0;  
    52.     height: 100%;  
    53.     vertical-align: middle;  
    54. }  
    55. .imgs{  
    56.     vertical-align: middle;  
    57. }*/  
    58.   
    59.   
    60. /*方案五:使用弹性盒的方式实现*/  
    61. .father{  
    62.     width: 800px;  
    63.     height: 500px;  
    64.     background: gray;  
    65.     display: flex;  
    66.     justify-content: center;  
    67.     align-items: center;  
    68. }  
    69. </style>  
    70. </head>  
    71. <body>  
    72.     <div class="father">  
    73.         <img class="imgs" src="img/pic2.png"/>  
    74.         <!-- <span></span> -->  
    75.     </div>  
    76. </body>  
    77. </html>  
    展开全文
  • 关于网页设计制作(布局)过程中,如果让内容居中,分为以下几种情况:1、文本,图片等内联元素的水平居中。text-align:center2、定宽的块状元素在浏览器窗口或父容器中水平居中。margin:0 auto3、不定宽块状元素...

    关于网页设计制作(布局)过程中,如果让内容居中,分为以下几种情况:

    1、文本,图片等内联元素的水平居中。text-align:center

    2、定宽的块状元素在浏览器窗口或父容器中水平居中。margin:0 auto

    3、不定宽块状元素水平居中

        方案一:给父元素添加display:table;将box转换为表格形式,将不定宽转换为定宽,然后设置左右margin为auto

       方案二:将子元素转换为内联块状元素,给父元素设置text-align:center;

    4、不定宽高的元素在屏幕窗口水平垂直都居中

    5、不定宽高元素在父元素中水平垂直都居中

    -----------------------------以下为详细内容-------------------------------------------------

    1、文本,图片等内联元素的水平居中。

           如果被设置元素为文本、图片等行内元素时,水平居中是通过给父元素设置text-align:center;来实现的。

        如:

    1. <style type="text/css">
    2. .imgBox{
    3. border: 1px solid black;
    4. text-align: center;
    5. }
    6. h1{
    7. border: 1px solid black;
    8. text-align: center;
    9. }
    10. .menu{
    11. border: 1px solid black;
    12. text-align: center;
    13. }
    14. form{
    15. border: 1px solid black;
    16. text-align: center;
    17. }
    18. </style>
    19. </head>
    20. <body>
    21. <!-- 一张图片在父容器中水平居中 -->
    22. <div class="imgBox">
    23. <img src="img/pic2.png"/>
    24. <span style="background-color: red;">我是span</span>
    25. </div>
    26. <!-- 文本内容在父容器中水平居中 -->
    27. <h1>我是标题</h1>
    28. <!-- 内联元素在父容器中水平居中 -->
    29. <div class="menu">
    30. <a href="#">新闻资讯</a>
    31. <a href="#">课程介绍</a>
    32. <a href="#">关于我们</a>
    33. <a href="#">在线留言</a>
    34. <a href="#">师资力量</a>
    35. <a href="#">联系我们</a>
    36. </div>
    37. <form action="">
    38. <input type="text"/>
    39. <input type="submit" value="百度一下"/>
    40. </form>
    41. </body>
    42. </html>

    2、定宽的块状元素在浏览器窗口或父容器中水平居中。margin:0 auto

    1. <style type="text/css">
    2. body,div,p,ol,ul,li,dl,dt,dd,form,table,tr,td,h1,h2,h3,h4,h5,h6,hr,figure,input,textarea{
    3. margin: 0;
    4. padding: 0;
    5. }
    6. .header{
    7. width: 100%;
    8. height: 100px;
    9. background: black;
    10. }
    11. .header_con{
    12. width: 1000px;
    13. height: 100px;
    14. background: red;
    15. margin:0 auto;
    16. }
    17. </style>
    18. </head>
    19. <body>
    20. <!-- 定宽块状元素在浏览器窗口或父容器中水平居中 -->
    21. <div class="header">
    22. <div class="header_con"></div>
    23. </div>
    24. <!-- 总结:满足定宽和块状两个条件的元素是可以通过设置“左右margin”值为“auto”来实现居中的 -->
    25. </body>

    3、不定宽块状元素水平居中

        方案一:给父元素添加display:table;将box转换为表格形式,将不定宽转换为定宽,然后设置左右margin为auto

    1. <style type="text/css">
    2. .box1{
    3. display: table;
    4. margin:0 auto;
    5. }
    6. .box1 a{
    7. display: block;
    8. float: left;
    9. padding:3px 5px;
    10. }
    11. </style>
    12. </head>
    13. <body>
    14. <!-- 网页中的分页效果,分页的页数不定,但是始终是居中的效果,如何实现? -->
    15. <!-- 方案一:给父元素添加display:table;将box转换为表格形式,将不定宽转换为定宽,然后设置左右margin为auto -->
    16. <!-- 当我们随意改变a的数量时,会发现他们始终是居中的 -->
    17. <div class="box box1">
    18. <a href="#">首页1</a>
    19. <a href="#">上一页</a>
    20. <a href="#">1</a>
    21. <a href="#">2</a>
    22. <a href="#">3</a>
    23. <a href="#">4</a>
    24. <a href="#">5</a>
    25. <a href="#">下一页</a>
    26. <a href="#">尾页</a>
    27. </div>
    28. </body>
    29. </html>

    方案二:

    将子元素转换为内联块状元素,给父元素设置text-align:center;

    1. <style type="text/css">
    2. .box2{
    3. margin-top: 50px;
    4. text-align: center;
    5. }
    6. .box2 a{
    7. padding:3px 5px;
    8. border: 1px solid blue;
    9. margin:0 3px;
    10. text-decoration: none;
    11. color: #333;
    12. font-size: 12px;
    13. display: inline-block;
    14. }
    15. </style>
    16. </head>
    17. <body>
    18. <!-- 网页中的分页效果,分页的页数不定,但是始终是居中的效果,如何实现? -->
    19. <!-- 方案二:将a转换为内联块状元素,给父元素设置text-align:center; -->
    20. <div class="box box2">
    21. <a href="#">首页</a><a href="#">上一页</a><a href="#">1</a><a href="#">2</a><a href="#">3</a><a href="#">4</a><a href="#">5</a><a href="#">下一页</a><a href="#">尾页</a>
    22. </div>
    23. </body>
    24. </html>

    4、不定宽高的元素在屏幕窗口水平垂直都居中

    1. <style type="text/css">
    2. /*body,div,p,ol,ul,li,dl,dt,dd,form,table,tr,td,h1,h2,h3,h4,h5,h6,hr,figure,input,textarea{
    3. margin: 0;
    4. padding: 0;
    5. }*/
    6. /*方案一:屏幕窗口的居中,使用固定定位,将四个方向的值全部设置为0,然后设置margin为auto,自动计算上下左右的margin值*/
    7. .imgs{
    8. position: fixed;
    9. left: 0;
    10. right: 0;
    11. top: 0;
    12. bottom: 0;
    13. margin:auto;
    14. }
    15. /*方案二*/
    16. /*使用弹性盒的方式实现,首先给html,body设置宽度为100%,然后给body设置主轴,交叉轴对齐方式为center*/
    17. /*html,body{
    18. height: 100%;
    19. }
    20. body{
    21. display: flex;
    22. justify-content: center;
    23. align-items: center;
    24. }*/
    25. /*方案三*/
    26. /*使用css3中transform变形中的translate来实现水平垂直都居中*/
    27. /*.imgs{
    28. position: fixed;
    29. left: 50%;
    30. top: 50%;
    31. transform: translate(-50%,-50%);
    32. }*/
    33. </style>
    34. </head>
    35. <body>
    36. <img class="imgs" src="img/pic2.png"/>
    37. </body>
    38. </html>


    5、不定宽高元素在父元素中水平垂直都居中

    1. <style type="text/css">
    2. /*.father{
    3. width: 800px;
    4. height: 500px;
    5. background: gray;
    6. position: relative;
    7. }*/
    8. /*方案一:给父元素相对定位,给子元素绝对定位*/
    9. /*.imgs{
    10. position: absolute;
    11. left: 0;
    12. top: 0;
    13. right: 0;
    14. bottom: 0;
    15. margin: auto;
    16. }*/
    17. /*方案二:使用css3的translate实现*/
    18. /*.imgs{
    19. position: absolute;
    20. left: 50%;
    21. top: 50%;
    22. transform:translate(-50%,-50%);
    23. }*/
    24. /*方案三:非父元素设置table-cell,将父元素转换为表格单元格形式*/
    25. /*.father{
    26. width: 800px;
    27. height: 500px;
    28. background: gray;
    29. display: table-cell;
    30. text-align: center;
    31. vertical-align: middle;
    32. }
    33. .imgs{
    34. vertical-align: bottom;
    35. }*/
    36. /*方案四:给img添加一个参照物span,并设置高度为100%*/
    37. /*.father{
    38. width: 800px;
    39. height: 500px;
    40. background: gray;
    41. text-align: center;
    42. }
    43. .father span{
    44. display: inline-block;
    45. width: 0;
    46. height: 100%;
    47. vertical-align: middle;
    48. }
    49. .imgs{
    50. vertical-align: middle;
    51. }*/
    52. /*方案五:使用弹性盒的方式实现*/
    53. .father{
    54. width: 800px;
    55. height: 500px;
    56. background: gray;
    57. display: flex;
    58. justify-content: center;
    59. align-items: center;
    60. }
    61. </style>
    62. </head>
    63. <body>
    64. <div class="father">
    65. <img class="imgs" src="img/pic2.png"/>
    66. <!-- <span></span> -->
    67. </div>
    68. </body>
    69. </html>
    展开全文
  • 如果只是loading元素在表格内居中,那很容易,css就可以实现。但是可见区域内居中的话,loading就要fixed布局,这样loading的top值是动态变化的,下面看几张图片,就会一目了然了。loading在表格内居中。这是在...

    这个问题的关键在于,loading在可见区域内居中。如果只是让loading元素在表格内居中,那很容易,css就可以实现。但是可见区域内居中的话,loading就要fixed布局,这样loading的top值是动态变化的,下面看几张图片,就会一目了然了。

    loading在表格内居中。

    99cfe241fa6db1a7bf1ea255aba3e0b4.png

    这是在表格内居中的loading,显而易见,当表格过长时,点击查询只能看到遮罩,而看不到loading。所以需要优化,优化的效果是在可视区内看到loading。

    loading在表格的可见区域内居中。当滚动的时候,也要保证loading实时居中。如下图所示:

    图一

    b0fcb84108ee3b054331bed597899d18.png

    图二

    4a7d09b2bd7e2428a8ccf159bfd8bb82.png

    图三

    e958e34434ac2db4adcad8cdb55cab7c.png

    从这三张图可以看出,loading的位置不是一直不变的,而是一直在表格的可视区域内居中的,

    怎么实现这种效果呢?

    这里用到javascript中的 getBoundingClientRect() 方法。

    Element.getBoundingClientRect() 方法返回元素的大小及其相对于视口的位置。

    <div class="table-wrap" id="table">        表格内容div>
    <script>    window.onload = function() {        let tableEle = document.getElementById("table");        let tableClientRect = tableEle.getBoundingClientRect();        console.log(tableClientRect);    }</script>// getBoundingClientRect()返回一个DOMRect对象。值如下:// DOMRect {x: 30, y: 160, width: 351.8374938964844, height: 2000, top: 160,bottom: 2160, left: 30,right: 381.8374938964844}

    getBoundingClientRect()  返回值有八个属性:left、top、right、bottom、x、y、width、height。

    left、top、right和bottom。分别表示元素各边与页面上边和左边的距离。x、y表示元素左上角到页面上边和左边的距离。如图所示

    72e0a6550f5edac111b80fc4f540c24f.png

    用这个方法实现上面所说的在表格的可视区域内居中那就很简单了。

    大家可以试着自己实现一下。

    下面我贴出我的代码。

    <html lang="en"><head>    <meta charset="UTF-8">    <title>Documenttitle>    <style>        *{            margin: 0;            padding: 0;        }        .content-wrap{            width: 100%;            overflow-y: auto;        }        .search-wrap{            width: 30%;            height: 100px;            background: #417bff;            color: #fff;            text-align: center;            margin: 30px;        }        .table-wrap{            width: 30%;            height: 2000px;            background: #985ee4;            color: #fff;            text-align: center;            margin: 30px;            position: relative;        }        .loading-mark{            width: 100%;            height: 100%;            background: rgba(0,0,0,0.2);            position: absolute;            left:0;            top: 0;        }        /*相对于表格居中,当表格过长,loading可能看不见*/        /*.loading-text{            position: absolute;            top: 50%;            left: 50%;            transform: translate(-50%,-50%);        }*/        .loading-text{            position: fixed;            transform: translate(-50%,-50%);        }        .footer-wrap{            width: 30%;            height: 200px;            text-align: center;            background: #314B8C;            color: #fff;            margin: 30px;        }    style>head><body><div class="content-wrap" id="main">    <div class="search-wrap">查询区域div>    <div class="table-wrap" id="table">        表格内容        <div class="loading-mark">div>        <div class="loading-text" id="loading">loading...div>    div>    <div class="footer-wrap">        底部内容    div>div><script>    window.onload = function() {        let tableEle = document.getElementById("table");        let loadingEle = document.getElementById("loading");        let tableClientRect = tableEle.getBoundingClientRect();        let winH = document.documentElement.clientHeight;        document.getElementById("main").style.height = winH +'px';        //console.log(tableClientRect);        /*        * 用fiexd 布局,loading在表格可视范围内居中,left和top都需要计算。        * 初始进来页面时,也就是图一的状态        * */        loadingEle.style.top = (winH-tableClientRect.top)/2 + tableClientRect.top + 'px';        loadingEle.style.left = tableClientRect.width/2 + tableClientRect.left + 'px';        /*        * 滚动页面时        * */        document.getElementById("main").addEventListener('scroll',function() {            tableClientRect = tableEle.getBoundingClientRect();            // 滚动的时候,图一状态的loading的top值            if (tableClientRect.top>0 && tableClientRect.bottom>winH) {                loadingEle.style.top = (winH-tableClientRect.top)/2 + tableClientRect.top + 'px';            }            // 滚动的时候,图二状态的loading的top值            if (tableClientRect.top<0 && tableClientRect.bottom>winH) {                loadingEle.style.top = winH/2;            }            // 滚动的时候,图三状态的loading的top值            if (tableClientRect.top<0 && tableClientRect.bottom<winH) {                loadingEle.style.top =tableClientRect.bottom/2 + 'px';            }        });    }script>body>html>

    以上,只是一种情况,实际的项目场景中,刚进来的时候,表格还没有请求数据的时候,表格肯定是没有那么长的。那计算的方式也就不是上面图一的计算方式了。

    下面看图片,这样也很容易的知道,loading的top 应该是

    top = (tableClientRect.bottom - tableClientRect.top)/2 + tableClientRect.top;

    9427b1f262d57342859f0a633c46d8e0.png

    还有可能的情况是:进来页面的时候,表格没在可视区,这种情况也是要做处理的,否则可能在点击查询的时候没有看到表格却看到了loading。

    c791153e474a62453ac7e9a8edbba25b.png

    以上的这些情况,有兴趣的可以自己完整的实现一下。或者有不同做法的,欢迎评论区留言,一起讨论。

    展开全文
  • 如何让div中的内容垂直居中 虽然Div布局已经基本上取代了表格布局,但表格布局和Div布局仍然各有千秋,互有长处。比如表格布局中的垂直居中就是Div布局的一大弱项,不过好在千变万化的CSS可以灵活运用,可以制作出...

    如何让div中的内容垂直居中

     

           虽然Div布局已经基本上取代了表格布局,但表格布局和Div布局仍然各有千秋,互有长处。比如表格布局中的垂直居中就是Div布局的一大弱项,不过好在千变万化的CSS可以灵活运用,可以制作出准垂直居中效果,勉强过关。 要让div中的内容垂直居中,无非有以下几种方法,等我一一列举:

    一、行高(line-height)法
    如果要垂直居中的只有一行或几个文字,那它的制作最为简单,只要让文字的行高和容器的高度相同即可,比如:

    p { height:30px; line-height:30px; width:100px; overflow:hidden; }
    这段代码可以达到让文字在段落中垂直居中的效果。

    二、内边距(padding)法
    另一种方法和行高法很相似,它同样适合一行或几行文字垂直居中,原理就是利用padding将内容垂直居中,比如:

    p { padding:30px; }
    这段代码的效果和line-height法差不多。

    三、模拟表格法
    模拟表格法其实就是用CSS中对元素的声明让块元素像表格一样显示,用到的CSS属性有display、vertical-align等。 先看下面的Html代码:

    <div id="box"> <div id="content">居中显示</div> </div>
    参照以上Html代码,让最外面名为box的Div呈表格样式显示,然后再让box中名为content的Div呈单元格显示,并利用vertical-align:middle让其垂直居中,这样就模拟出来和表格一样的显示方式,CSS代码如下:

    #wrap { height:400px; display:table; } #content { vertical-align:middle; display:table-cell; border:1px solid #FF0099; background:#000; width:400px; }
    但这种方法有一个弊端,由于IE浏览器对高度理解会产生错误,所以这种方法仅对Firefox有效,对IE无效,既然这样,我们就需要找出对IE的修正方法,于是有了另外一种方法。

    四、定位法
    顾名思义,定位法是利用CSS定位属性position对元素进行定位的方法,也属于模拟方法,不过它对IE的支持还是不错的。 它的Html代码为:

    <div id="box"> <div id="sub"> <div id="content">垂直居中</div> </div> </div>
    这段代码比上一种方法中多出了一个名为sub的Div,它的作用是用来定位,原理就是:首先让box出于相对定位,sub相对box出于相对定位,位于box垂直方向的50%,再让content中的真正内容出于sub垂直方向的-50%,从而制作出content在box中垂直居中的效果,它们的CSS代码如下:

    #wrap { border:1px solid #000; background:#F00; width:400px; height:400px; position:relative; } #subwrap { position:absolute; top:50%; } #content { border:1px solid #000; position:relative; top:-50%; color:#FFF; }
    这段代码无论是在IE中还是Firefox中,都能正常居中了

    展开全文
    展开全文
  • 虽然Div布局已经基本上取代了... 要让div中的内容垂直居中,无非有以下几种方法,等我一一列举:一、行高(line-height)法如果要垂直居中的只有一行或几个文字,那它的制作最为简单,只要让文字的行高和容器的高度...
  • 如何DIV标签让内容居中显示出来

    千次阅读 2014-06-19 14:54:42
    原文:如何DIV标签让内容居中显示出来 HTML中看NanShan 即时通讯如何DIV标签让内容居中显示出来 一、单行垂直居中 如果一个容器中只有一行文字,对它实现居中相对比较简单,我们只需要设置它的实际高度...
  • 虽然Div布局已经基本上取代了表格... 要让div中的内容垂直居中,无非有以下几种方法,等我一一列举: 一、行高(line-height)法如果要垂直居中的只有一行或几个文字,那它的制作最为简单,只要让文字的行高和容...
  • 虽然Div布局已经基本上取代了... 要让div中的内容垂直居中,无非有以下几种方法,等我一一列举:一、行高(line-height)法如果要垂直居中的只有一行或几个文字,那它的制作最为简单,只要让文字的行高和容器的高度...
  • 如何让div水平垂直居中 @(css)[妙瞳] 引子 我们经常遇到需要把div中的内容进行水平和垂直居中。所以,这里介绍一种方法,可以使div水平居中和垂直居中。 代码: <!DOCTYPE html> <html lang="en"> <...
  • 虽然Div布局已经基本上取代... 要让div中的内容垂直居中,无非有以下几种方法,等我一一列举: 一、行高(line-height)法如果要垂直居中的只有一行或几个文字,那它的制作最为简单,只要让文字的行高和容器的高度...
  • 虽然Div布局已经基本上取代了表格布局,但表格布局和Div布局仍然各有千秋,互有长处。比如表格布局中的垂直居中就是Div布局的一大弱项,不过好在千变万化的CSS可以灵活... 要让div中的内容垂直居中,无非有以下几...
  • 有时候我们会纠结于如何让这两种元素在父容器DIV中垂直居中显示(当然 ,这里我们抛开表格布局不谈,因为表格可以让内容自动垂直居中)   1. 对于图片,如下所示:     .container{ ...
  • 问:有一个div块,其width为300px,如何设置margin让div居中显示? 答:margin设置为 margin:0 auto,即div块的上下外边距设置为 0 , 左右外边距设置为 自动 auto。 <style> div{ width:300px; ...

空空如也

空空如也

1 2 3 4 5 6
收藏数 113
精华内容 45
关键字:

如何让div内容居中