让div居中对齐

最新推荐文章于 2023-09-02 21:46:10 发布
最新推荐文章于 2023-09-02 21:46:10 发布
阅读量1.6k 收藏
点赞数
分类专栏： JavaScript 文章标签： div xhtml 浏览器 html class
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/diligentcatrich/article/details/5624452
版权

让div居中对齐

来源：本站原创 点击：

使用margin-left:auto;margin-right:auto; 可以让你的div居中对齐。
.style{margin-left:auto;margin-right:auto;}
缩写形式为：
.style{margin:0 auto;}
数字0 表示上下边距是0。可以按照需要设置成不同的值。

查看下面的例子：
运行代码 无着色模式 复制 打印 ?
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  2. <html xmlns="http://www.w3.org/1999/xhtml" lang="zh-cn">  
  3. <head>  
  4. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />  
  5. <title>居中div演示效果</title>  
  6. <style type="text/css">  
  7. .align-center{   
  8.     margin:0 auto;      /* 居中 这个是必须的，，其它的属性非必须 */   
  9.     width:500px;        /* 给个宽度 顶到浏览器的两边就看不出居中效果了 */   
  10.     background:red;     /* 背景色 */   
  11.     text-align:center;  /* 文字等内容居中 */   
  12. }   
  13. </style>  
  14. </head>  
  15.   
  16. <body>  
  17. <div class="align-center">居中div演示效果</div>  
  18. </body>  
  19. </html>  

注意，需要加上上面的那句

才能生效，要是不想要这句的话，也可以给body加一个属性：
body{text-align:center;}

另外，让div内的内容（包括文字及图片）居中的代码是： text-align:center;

一剑平江湖
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Docker镜像分析工具dive原理解析
01-08
今天推荐一个这样的开源工具，用于探索 Docker 镜像，各层内容以及发现缩小 Docker/OCI 镜像大小的方法。这个工具就是：dive。 工具地址：https://github.com/wagoodman/dive，Star 数：22k+。 这个工具可以清晰得看到镜像每一层都包含哪些内容，方便你分析是否有必要，如下图所示。 特性 该工具的主要特性包括： 按层显示 Docker 镜像内容； 指出每一层的变化； 评估 “镜像的效率”； 快速的构建/分析周期； 和 CI 集成； 支持多个镜像和容器引擎：比如 docker、docker-archive 和 podma
常见的div盒子居中（上下左右）实现
weixin_30655569的博客
07-12 1515
关于div的上下左右居中，之前总是学完之后忘记，现在总结一下并记录下来，常见的有以下的几种 实现的效果图： 1.使用absolute进行绝对定位 注：这方法,需要知道子元素的宽高,但是不需要知道父元素的宽高 2.利用margin的auto来实现 注：实现原理是设置margin自动适应,然后设置定位的上下左右都为0,就如四边均衡受力从而实现盒子的居中 3....
div 中元素居中的N种常用方法
u011799045的专栏
08-13 1万+
div 中元素居中的N种常用方法
div或者div中的内容居中对齐的方法
程序星空实验室
09-09 4395
【代码】div或者div中的内容居中对齐的方法和样式。
div内所有元素居中对齐
kathiegoodlucky的博客
01-25 3630
元素居中对齐 代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>元素居中对齐</title> <style> </style> </head> <body> 实现元素居中对齐的两种方式 第一种，利用flex和align实现，实现简便，但是不支持ie9及以下的版本 <div style="width:2
div内容居中(div块内容居中)
计算机毕业论文源码，学生个人网页制作html源码。贴近用户做网络推广和互联网优化。
02-25 1774
如何让div内容居中？ 让div文字居中如果要让DIV中的文字居中，就得用到文字对齐方式代码text-align:center，这个居中默认为水平居中，详细代码写法如下：div { border:1px solid red;text-align:center;}如果要DIV中的文字垂直居中，你就必须要用到文本高度这个...
CSS使两个不同的div居中对齐的三种解决方案
最新发布
漏刻有时数据可视化大屏（PHP&ECHARTS智能化开源软件系统）
09-02 2249
Flexbox是一个用于创建灵活布局的CSS3模块。使用Flexbox，可以很容易地对元素进行居中对齐。CSS Grid是另一个用于创建二维布局的CSS3模块。使用Grid，也可以轻松地对元素进行居中对齐。在CSS中，有多种方法可以让两个不同的div居中对齐，包括相对定位和绝对定位。以上三种方法都可以实现两个不同的div在页面中居中对齐，你可以根据具体情况选择最适合你的方法。如果你使用的是相对定位和绝对定位，你也可以使用。属性来实现居中对齐。
css实现文本和div居中对齐详细讲解示例
09-25
主要介绍了css实现文本和div居中对齐详细讲解示例,需要的朋友可以参考下
div中子div在firefox ie 水平居中对齐
12-12
比如： <div> <div> </div> </div> 想让子div在父div中水平居中对齐，如果在css中写 div { text-align: center; }的话在ie中浏览没有问题，但在firefox中依然左对齐。 所以必须再加一个样式 div div { margin-left:...
DIV和SPAN垂直居中对齐的实现方法
09-25
DIV和SPAN如何垂直居中对齐，水平居中很简单，设置text-align:center就可以了，垂直居中一直很是疑惑，下面为大家解惑
css垂直居中问题
weixin_38951735的博客
01-06 350
案例1： <div class="center"> <div class="aa"> div居中 </div> </div> ```css .center{ width: 400px; height: 400px; border:1px solid red; ...
div居中方法（共8种）
热门推荐
qq_41425194的博客
04-25 10万+
水平居中 1.行级元素：为该行级元素的父元素设置text-align:center配合line-height样式 <div style="width: 500px;height: 100px;line-height: 100px;border: 1px solid green;text-align:center;"> <span>行级元素</span> </div> 2.块级元素：为其自身设置margin:auto样式 <div st
div 中心对齐
HappyRocking的专栏
09-19 822
块元素可以把左，右页边距设置为"自动"对齐。 Note: 在IE8中使用margin:auto属性无法正常工作，除非声明 !DOCTYPE margin属性可任意拆分为左，右页边距设置自动指定，结果都是出现居中元素 菜鸟教程(runoob.com) .center {     margin:auto;     width:70%;     backg
html div居中左对齐,div对齐 CSS实现DIV居中对齐 div居右对齐 div居左对齐
weixin_39550940的博客
06-07 7086
div对齐 CSS实现DIV居中对齐 div居右对齐 div居左对齐使用CSS浮动属性实现DIV各种对齐，比如DIV层左对齐，DIV居中对齐，DIV居右对齐等(DIV靠右 居中靠左对齐介绍篇)实现DIV对齐用到关键属性有两个，一个为float一个为margin。第一个float,可以让你div层居左居右对齐，另外一个margin实现div盒子居中对齐。接下来DIVCSS5使用分别实例介绍DIV布局...
常见的div居中对齐方式
weixin_33901843的博客
09-02 850
前段时间面试的时候面试题里面对css考察最多的就是div居中对齐的问题，因此特地对div居中对齐的方式做了一个简单的总结，本文的目标就是希望各位在以后根据不同的情况使用不同的居中方式，闲话少说，直接上代码 <div class="wrapper"> <div class="inner"></div&g...
实现div中的div水平垂直居中
D_Z_Yong的博客
08-19 3万+
方法一 利用transform实现div居中,要先设置定位 css .outer { width: 500px; height: 200px; background-color: green; position: relative; } .inner { width: 20px; height: 10px; background-colo...
让div居中的方式的几种方法
恒二哥的博客
11-04 7万+
div垂直居中的几种方式
如何让div靠右_div对齐 CSS实现DIV居中对齐 div居右对齐 div居左对齐
weixin_31858863的博客
01-12 9876
使用CSS浮动属性实现DIV各种对齐，比如DIV层左对齐，DIV居中对齐，DIV居右对齐等(DIV靠右 居中 靠左对齐介绍篇)实现DIV对齐用到关键属性有两个，一个为float一个为margin。第一个float,可以让你div层居左居右对齐，另外一个margin实现div盒子居中对齐。接下来DIVCSS5使用分别实例介绍DIV布局对齐。为了过程DIV对齐变化，DIVCSS5设置3个DIV盒子，分...
css中div居中对齐
菜鸟的成长之路
10-12 2万+
div整个块居中对齐: &amp;amp;amp;lt;div style=&amp;amp;quot;margin:0px auto;&amp;amp;quot;&amp;amp;amp;gt;&amp;amp;amp;lt;/div&amp;amp;amp;gt; div中内容居中:&amp;amp;amp;lt;div align=&amp;amp;quot;center&amp;amp;quot;&amp;amp
css样式div居中对齐
09-02
要让CSS样式的div居中对齐，有几种方法可以实现。其中一种方法是通过设置div的样式属性来实现。首先，可以使用flex布局，将div的display属性设置为flex，并设置justify-content属性为center，即可使div在水平方向上...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值