margin: 0px auto与居中

最新推荐文章于 2020-06-15 14:27:44 发布
最新推荐文章于 2020-06-15 14:27:44 发布
阅读量169 收藏
点赞数
分类专栏： html 文章标签： css
代码如下 

.cen {
	margin: 0px auto;
	border: 1px red solid;
}
</style>
</head>
<body>
	<div class="cen">aaa</div>
</body>

[img]http://dl.iteye.com/upload/picture/pic/122396/c58d815b-cd30-33ca-8caf-c9b63c1d90db.jpg[/img]
发现div并没有居中显示,原因是它的width没有设置,默认值为auto.
而CSS规范中说

If 'width' is set to 'auto', any other 'auto' values become '0' and 'width' follows from the resulting equality.

见[url]http://www.w3.org/TR/CSS2/visudet.html#Computing_widths_and_margins[/url]

我猜它的意思是如果width是auto,那么其他的auto会设为0,然后width设为最大宽度.
PS: follows from the resulting equality.真心理解不了....

所以上面那个例子中,div没居中显示.
解决方法要看究竟是想div居中,还是div里面的字居中

div居中 

.cen {
	margin: 0px auto;
	border: 1px red solid;
	width: 300px;
}

[img]http://dl.iteye.com/upload/picture/pic/122398/86f0c1f5-1446-3628-8cd0-5fe207054766.jpg[/img]
div的内容居中 

.cen {
	margin: 0px auto;
	border: 1px red solid;
	text-align: center;
}

[img]http://dl.iteye.com/upload/picture/pic/122400/181e8c27-510e-3d7a-a84a-769122a06a7b.jpg[/img]
iteye_12858
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS之“绝对定位”的盒子使用margin:0px auto；不能实现水平居中的解决方案
鸭绒的博客
07-09 2588
在盒子实现水平居中的布局中，我们经常直接使用margin:0px auto;来实现居中，在很多时候的确可以一句这样的代码就实现了，但在绝对定位的盒子中，这是不起作用的。 1.根据代码测试是否真如上面所说： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width.
div使用margin:0px auto不居中的原因分析及解决
09-25
`margin: 0px auto` 是一个经常被用来实现水平居中的CSS属性组合，它适用于块级元素，通过设置左右外边距为自动来达到居中效果。然而，在某些情况下，尤其是在IE浏览器中，这种方法可能无法正常工作。本篇文章将深入...
margin:0px auto;
Noahの梦想
10-30 1042
auto是页面左右留白相同的意思上下留白为0px,左右适当留白切空间相等默认情况下,内部div是在外部div的左上方当设置了margin:0px auto;后内部div就会在div居中...
IE下div使用margin:0px auto不居中的原因
weixin_30825581的博客
04-05 138
一般在将div居中显示时，使用css： divX {margin:0 auto;} 此css在firefox下是好的，但是在ie下不起作用，网上看到原因如下： <div id="cnbruce">margin: 0 auto 看看内容居中否</div> 如上调试结果，IE6.0是不居中的，当然解决的办法可以是对网页主体“<body>”声明...
margin:0px auto; 居中
PT1993的博客
03-29 818
上下页面空白为 0px 左右页面空白自适应并且相等 可以达到横向居中的效果 eg: <div id="div1" style="width:300;height=300"> <div id="div2" style="width:100;height:100;margin:0px,auto"></div> </div> 则div2在横向上就处于div...
{margin:0px auto}让div居中的具体含义以及原理
weixin_34161064的博客
03-20 353
{margin:0px auto}让div居中的具体含义以及原理auto就是“一样”的意思，如果是左右auto的话，意思就是：这个 DIV 离 左边的距离 跟 右边的距离 是一样的。margin:0px auto；就是上下的距离是0px，左右的距离是“一样”。{ margin-right: auto; margin-left: auto;}如果是这样写呢,有点感觉代码繁杂,于是就可以简写成这样.....
通过margin:0px auto来实现一列固定宽度居中
01-21
复制代码代码如下: XHTML CODE： ”layout”>一列固定宽度居中</div> CSS CODE： 复制代码代码如下: #layout{ background-color:#C7E091; border:2px solid #B0BCA6;... margin:0px auto;/*外边距参数*/ }
关于margin: auto及margin: 0 auto的一些见解
路漫漫其修远兮，吾将上下而求索
06-15 1万+
在写css时margin:auto;使用频率非常高，常用于div的居中。 何为margin？ margin是指块级元素的外边距，如下图所示，XXXXX是div中的内容，通过设置margin的值，可控制div与其他块级元素的距离 margin设置不同数量的值时的含义 我们常看到 margin:auto; margin: 0px auto; margin: 10px 20px 30px 40px; 相关的语句，当margin有不同数量的值时，其含义分别是什么？ 首先margin最多有.
关于网页布局中常见的margin: 0px ; padding: 0px; 总结
weixin_30258901的博客
08-15 3204
我们在网页布局中常用到margin: 0px; padding: 0px; 但是在大型的网站布局中通常不这样写通常是按下面这种方式。 ul, li, ol, dl, dt, dd, div, p, span, h1, h2, h3, h4, h5, h6, a { padding: 0px; margin: 0px; } 但是经过本人的逐一验证发现有的标签的初始化marg...
margin:0 auto;和margin:0px;区别在哪里？
evilcry2012的专栏
05-21 3416
margin:0 auto;和margin:0px;区别在哪里？ 2010-08-02 23:00nnnn123nnn | 分类：编程语言 | 浏览12412次 分享到： 2010-08-02 23:11 提问者采纳 margin:0 auto;相当于margin:0 auto 0 auto;即上下是0，左右是自动。 margin:
CSS margin:0 auto 水平居中
默的博客
06-05 789
本文转载自：http://www.divcss5.com/rumen/r773.shtml 一、CSS margin认识 margin设置对象外边距,如果我们给DIV设置一条边框线(border)样式后，在DW软件里即可看出margin设置值其实是在边框外距离，此样式设置对象（DIV）之间间距的样式。 二、margin:0 auto作用语法 1、margin:0 auto介绍 margin:0 a...
css中设置div水平居中，margin:0px auto没用的情况
热门推荐
宏亮的专栏
09-03 1万+
在CSS中加了margin:0px auto;却没有效果，不能实现居中的问题！margin:0px auto;意思就是：上下边界为0，左右根据宽度自适应！就是水平居中的意思.无效的原因是，当你没有设置width时，解释器不知道你的宽度，当然就不会居中，就会到左边去，所以设置width就好了。
浅谈margin:0 auto元素居中的问题
JoelLiverpool的博客
07-20 687
今天整理了下元素居中的问题，和大家分享和交流一些心得 首先，需要居中的元素分为三类： 普通的div浮动元素设定了绝对定位的元素 关于普通的div的居中 这个相对来说是比较简单的，直接用margin:0 auto; div{ width:100px; height:100px; background-color:yellow; margin:0 auto; }
* {margin:0px; padding:0px;}什么意思？
aizongsai2251的博客
01-06 3830
* {margin:0px; padding:0px;} * 表示所有的元素的对齐方式以及和父类之间的间距都为0 body{margin:0px;padding:0px;} body里面的则表示的是网页的body该元素的间距和间距 *号是全部的都外边距和内边距都为0，而body只是主题的外边距和内边距都为0 转载于:https://www.cnblogs.com/qiwu13...
form设置margin:0px auto不生效
感恩、奋进、自信
10-15 2404
我们知道要想让一个组件水平居中，只要设置下面两行代码就可以了： display：block; margin:0px auto; 但是给form这样设置，却达不到水平居中的效果。 解决方法：给form设置属性width，即给form设置一个宽度。 如下面的写法就可以让form水平居中了： width:200px; display：block; margin:0px auto;
为什么css一开始需要设定margin和padding为 0px?
diejiadu4171的博客
02-23 1845
我们在写HTML的时候，通常会在样式里先写上一些像body、a、ul li等这些标签的全局的一些样式。之所以有这样的习惯，主要是是因为以下几点： 　　首先：浏览器兼容。我们做的网页是给用户看的，我们只负责把网页做出来，至于用户怎么使用，在哪种浏览器上使用就不是我们的事情了。但是不同的浏览器他们的margin又不尽相同，所以为了满足这种需求，我们一般都是为body设置他们的margin和...
css中 margin: 0px 254px 0px 254px; 是什么意思
公子七
04-06 1009
例子 1margin:10px 5px 15px 20px;上外边距是 10px右外边距是 5px下外边距是 15px左外边距是 20px例子 2margin:10px 5px 15px;上外边距是 10px右外边距和左外边距是 5px下外边距是 15px例子 3margin:10px 5px;上外边距和下外边距是 10px右外边距和左外边距是 5px例子 4margin:10px;所有 4 个外
html5学习笔记6-第二章上机实践
qilixiaoshi的专栏
02-23 952
在W3School学习图片边框，不是很明白round和repeat的区别。 div { border:15px solid transparent; width:300px; padding:10px 20px; } #round { -moz-border-image:url(/i/border.png) 30 30 round; /* Old Firefox */ -we
css布局中margin为0，但依然有间距问题的解决方法
UaoSonic
05-17 1万+
    在进行布局时经常会出现，div与div之间虽然设置为了margin: 0px ，但是依然有间距的问题，比如以下这种情况：html部分代码如下：&lt;body&gt; &lt;div class="main"&gt; &lt;div class="content"&gt; &lt;div class="Sbox"&gt; &lt;div class=
margin: 0px auto
最新发布
08-17
margin: 0px auto 是一种设置元素水平居中的方式。这个属性将左右外边距设置为自动，而上下外边距设置为0像素。通常情况下，它可以用于将块级元素水平居中。 然而，要使元素水平居中，以下条件需要满足： 1. 元素...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值