网页布局的居中问题，如何让文本居中，如何让div居中，怎样让div居中？居中都有哪几种情况

最新推荐文章于 2024-06-18 19:41:46 发布
最新推荐文章于 2024-06-18 19:41:46 发布
阅读量3.5k 收藏 7
点赞数 1

关于网页设计制作（布局）过程中，如果让内容居中，分为以下几种情况：

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
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
居中布局汇总
小脚的Blog
10-10 410
在页面的布局中，有许多需要居中对齐的布局，有以下几种方法： 效果图 首先放置四个div块级元素作为测试，并统一为div元素设置style 方法一：对第一个div设置居中方式margin：0 auto；这里为了四个div元素排列美观，上下间距设置了20px 有的时候块级元素内会添加文本，需要将文本也进行居中对齐设置： 水平居中 text-align：center； 竖直居中 为 line-height设置数值，与外部块级元素高度一致，这里外部块级元素div设置h.
css居中
shuawanxiao的专栏
02-02 732
水平居中的text-align:center 和 margin:0 auto   这两种方法都是用来水平居中的，前者是针对父元素进行设置而后者则是对子元素。他们起作用的首要条件是子元素必须没有被float影响，否则一切都是无用功。margin:0 auto 也可以被写成margin:0 auto 0 auto。不能理解的童鞋们可以自己去找找关于css缩写的内容。
HTML中的文本居中
最新发布
qq_42194101的博客
06-18 315
本文将详细介绍如何在HTML中实现文本居中，包括使用不同的HTML标签和CSS属性来达到这一目的。
css+div让布局居中
weixin_34168880的博客
06-08 61
css布局被认为是 难以理解的，特别是对新手来说说，我最初学习css的时候 也是这种感觉，初学的朋友 也向我抱怨过这个问题。其实我感觉当你回过头来再看 那些典型的例子的时候会发现真的没什么难以理解的。今天我就介绍两种让布局居中的方法，前几天baidu了一下“css布局居中”，结果没发现有意义的东西，所以今天写这篇文章 方法一 ：利用auto maigins 先设置一个要居中...
如何让整个页面内容居中？
开心每天，水滴石穿。
09-12 1512
如何使整个页面内容居中，如何使高度适应内容自动伸缩。这是学习CSS布局最常见的问题。下面就给出一个实际的例子，并详细解释。（本文的经验和是蓝色理想论坛xpoint、guoshuang共同讨论得出的。）     首先先按这里看实际运行效果，这个页面在mozilla、opera和IE浏览器中均可以实现居中和高度自适应。我们来分析代码： 完整代码 body{ background:#
关于页面居中布局的方法
xy_peng的博客
06-17 2377
最近在给自己梳理一些前端的东西，零零碎碎的总结了一些东西。在页面布局中，居中是最重要的也是基本技能之一。现在总结了一些css 的居中方法： 1、水平居中的方式： 在对有display:inline的父标签，添加样式，则标签内的子元素居中 display:inline-block; text-align:center; 在对display:table或flex的标签内的子元素居中;则有样式 display:table/flex; margin:0 auto; 使用position绝...
DIV+CSS中让布局、背景图片、文字内容居中的方法
12-13
在DIV CSS布局的页面里，从布局内容到页面里文章文字居中都是非常重要的，而css来设置居中也是非常简单的。 　1、首先介绍使用css属性让整体布局的居中： 　设置对象的父级内容居中，这里一个页面的为父级是什么呢？...
CSS网页布局：div水平居中的各种方法
12-12
不过，还是经常会有人问到这个问题，在这里我简单总结一下使用Div和CSS实现页面水平居中的方法： 一、margin:auto 0 与 text-aligh:center 在现代浏览器（如Internet Explorer 7、Firefox、Opera等）现代浏览器实现...
让DIV水平垂直居中的两种完美方法推荐
09-24
在网页布局中，将一个DIV元素在其父容器中水平垂直居中是一个常见需求。本文介绍了两种实用的方法来实现这一目标，这两种方法分别基于传统的CSS布局技术以及CSS3中的transform属性。 第一种方法利用负的margin值来...
CSS网页布局：div垂直居中的各种方法
09-27
CSS网页布局中，div元素的垂直居中是一个常见的需求，尤其在设计响应式网页时更为重要。虽然CSS的`vertical-align`属性适用于某些特定元素，如表格单元格，但对于div等块级元素，该属性并不起作用。因此，我们需要...
css-页面布局(居中对齐详解)
09-23 4061
入门前端，首先接触到的技术就是html，css。首先说css布局这块，逻辑性的东西不多，或者根本就没有。难的是如何熟练运用css + html设置出漂亮的页面布局尤为重要。而如何实现一个div在页面中居中对齐，又是一个难啃指点。下面结合实例分享一些css技巧。 居中布局 大家都知道居中布局分两种，水平居中布局和垂直居中布局。这两种技术在目前的web开发中很常见，时不时都会碰到。话说回来，水平居中布...
html整体布局居中,HTML实现常见居中布局
weixin_32139875的博客
05-30 1940
原标题：HTML实现常见居中布局一、水平居中水平居中的页面布局中最为常见的一种布局形式，多出现于标题，以及内容区域的组织形式，下面介绍四种实现水平居中的方法(注：下面各个实例中实现的是child元素的对齐操作，child元素的父容器是parent元素) 使用inline-block 和 text-align实现 .parent{text-align: center;} .child{display...
页面垂直居中实现方法（HTML/CSS）
TdMaster的博客
10-02 2451
Flexbox是CSS3中引入的一种弹性盒子布局模型，它提供了简单而强大的方式来实现元素的居中对齐。您可以根据具体的需求和兼容性考虑选择其中的一种方法来实现您的网页布局。本文将介绍几种常用的方法，以实现HTML/CSS中的页面垂直居中效果。元素的高度设置为100%，这是为了让页面占据整个视口的高度。元素的高度设置为100%，并将它们的定位设置为相对定位。元素的高度设置为100%，并将它们的显示属性设置为表格布局。另一种方法是使用表格布局来实现页面的垂直居中。，我们将内容区域的左上角定位在父元素的中心点。
关于网页布局中标题文字压线居中的安全方法
ouyangye831的博客
11-28 1298
如何安全的布局文字压线居中，横线带修饰符时又该如何操作。
CSS+DIV 区块居中布局
Chung
08-04 944
div和span区别：   div将页面分成若干个区块   span将一行内分划成几个区域 &lt;html&gt; &lt;head&gt; &lt;style type="text/css"&gt; #main{ width:460px; margin-top:0px; margin-right:auto; mar...
wangEditor上传视频功能实现
疑问 搜索 动手 解决 记录
09-08 1698
这是已经修改过的源码,注释也有, ACV拿走,全局查找对应的方法,仔细看,不谢 (function (global, factory) { typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() : typeof define === 'function' && define.amd ? define(factory) : (global.wang
html文本水平居中对齐_如何使用HTML将网页上的文本居中或对齐
热门推荐
08-18 1万+
html文本水平居中对齐How To Build a Website With HTML 如何使用HTML构建网站This tutorial series will guide you through creating and further customizing this website using HTML, the standard markup language us...
wangeditor富文本编辑器的一些坑
helixsky的博客
04-04 1万+
看到CSDN都在用wangeditor而且用起来的确简单，可是图片上传还是一直搞不定。 1.返回格式问题 官方要求返回json格式，先定义字典赋值，然后采用json.dumps(result,ensure_ascii=False)进行后端返回： { "errno": 0, "data": [ "图片1地址", "图片2地址", ...
UEditor图片居中问题
tyj1575321367的博客
04-08 6512
UEditor图片居中问题
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值