margin: 0px auto与居中 - 大神带我来搬砖 - ITeye博客

`

kabike

浏览: 598068 次
性别:
来自: 大连

最近访客更多访客>>

agreetech

confused9090

kavy

aininim

博主相关

博客

微博

相册

收藏

留言

关于我

文章分类

社区版块

存档分类

最新评论

fei33423：同意你的说法. hbase 的强一致性分为两部分来说. 数据分 ...
浅谈Hbase 的强一致性
zengwenbo5566： ,高人，刚安装了 genymotion 那个附带 virtu ...
VirtualBox报错Unable to load R3 module GetLastError=1790 (VERR_UNRESOLVED_ERROR
kabike： QQ1289714862 写道这代码有问题吧 bar1 bar ...
AtomicBoolean运用
QQ1289714862：这代码有问题吧 bar1 bar2 那来的你是不是new了两 ...
AtomicBoolean运用
DEMONU：需要依赖这么多东西啊
hbase 0.96和hadoop 2.2 java 客户端的jar依赖

margin: 0px auto与居中

博客分类：

html

阅读更多

代码如下

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

发现div并没有居中显示,原因是它的width没有设置,默认值为auto.
而CSS规范中说

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

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

我猜它的意思是如果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;
}

div的内容居中

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

分享到：

mysql timestamp和int存储时间 | 正则表达式捕获组,向前引用,零宽度断言 ...

2013-01-08 13:21
浏览 2625
评论(0)
分类:Web前端
查看更多

评论

发表评论

您还没有登录,请您登录后再发表评论

相关推荐

div使用margin:0px auto不居中的原因分析及解决: 复制代码代码如下: ”cnbruce”>margin: 0 auto 看看内容居中否</div> 如上调试结果，IE6.0是不居中的，当然解决的办法可以是对网页主体“<body>”声明文本居中，即复制代码代码如下: <style> body{...

通过margin:0px auto来实现一列固定宽度居中: 复制代码代码如下: XHTML CODE： ”layout”>一列固定宽度居中</div> CSS CODE：复制代码代码如下: #layout{ background-color:#C7E091; border:2px solid #B0BCA6;... margin:0px auto;/*外边距参数*/ }

XHTMl 第三章源代码: margin:0px auto 0px auto; width:800px; text-align:left; background:url(container_bg.jpg) no-repeat bottom right; /* 底部右侧的背景图片 */ } #globallink{ width:800px; height:430px; margin:0px; ...

css margin:0 auto居中: 复制一下代码到记事本，修改为html后缀的文件。代码 <html xmlns=”http://www.w3.org/1999/xhtml”> <head> <... charset=utf-8″ />...div style=”width:50px; height:50px;... margin:0 auto;

在IE下，当margin:0 auto;无法使得块级元素水平居中时: 今天遇到使用一个，div元素使用了以下样式 ... margin:0 auto;} 在火狐下此div水平居中，但在IE下不居中。原因是，此div的父级元素没有使用以下样式 div.wrap_parent{text-align:center;} 特此记录

静态页练习: margin: 0px;/*边距*/ text-align: center;/*文字对齐方式*/ background: #FFF;/*背景颜色*/ } a:link, a:visited { font-size: 12px;/*字体大小*/ text-decoration: none;/*文字修饰*/ } a:hover { } /*页面层...

ie下margin不居中的三种解决方法: 正常情况下需要将div居中显示时，使用Css样式:margin:0 auto即可，但有时使用margin:0 auto后在FF、Chrome里能居中，而在IE678里不居中的现象。如下代码: 复制代码代码如下:<style type=”text/css”>#con{...

CSS网页布局DIV水平居中的各种方法: 一、margin:auto 0 #wrap { margin:0 auto;} 上面这段代码的意思是说使wrap这个div到左右两侧的距离自动设置，上下为0（可以为任意）。二、相对定位与负的边距 #wrap { position:relative; width:760px; left...

ie css margin auto 不居中解决方案: 一般在将div居中显示时，使用css： divX {margin:0 auto;} 此css在firefox下是好的，但是在ie下不起作用，网上看到原因如下： <div id=cnbruce>margin: 0 auto 看看内容居中否</div> 如上调试结果，IE6.0是不居中的...

【JavaScript源代码】使用JavaScript实现轮播图特效.docx: 使用JavaScript实现轮播图特效　本文实例为大家分享了JavaScript实现轮播图特效的具体代码，供大家参考，具体内容如下　<!DOCTYPE html>　　<html>　　.../*相对定位*/　margin: 50px auto;/*离顶部50px，并且居中*/

使用绝对定位+负外边距让DIV层水平垂直居中页面: 让一个层水平垂直居中是一个非常常见的布局方式，但在html中水平居中使用margin:0px auto;可以实现，但垂直居中使用外边距是无法达到效果的。（页面设置height:100%;是无效的），这里使用绝对定位+负外边距的方式来...

将一个绝对定位的div水平垂直居中对齐: 在通常情况下，可以为元素添加margin:0px auto即可让元素在它的父元素水平居中，然后再将它设置为垂直居中对齐即可。但是为绝对定位的对象添加margin:0px auto并不能生效，所以说还是要用老办法实现。代码示例如下:...

【JavaScript源代码】js实现网页计算器.docx: js实现网页计算器 ...　一个计算机中具备了：　计算机整体框输入框输入按钮　计算机整体框：　/*设置div样式*/　#showdiv{　border: solid 1px;.../*设置居中*/　margin-top: 50x;　background-color:

使用position:fixed属性让DIV居中: 下面与大家分享下使用position:fixed属性让DIV居中的关键代码是position:fixed;left:0px;right:0px;width:706px;margin-left:auto;margin-right:auto，感兴趣的朋友可以参考下哈

css中position:fixed实现div居中上下左右居中: margin:auto; left:0; right:0; top:0; bottom:0; width:200px; height:150px; } 如果只需要左右居中，那么把 bottom:0; 或者 top:0; 删掉即可如果只需要上下居中，那么把 left:0; 或者 right:0; 即可下面附一个...

基于jQuery实现的水平和垂直居中的div窗口: 1、通过css实现水平居中：代码如下: .className{ margin:0 auto; width:200px; height:200px; } 2、通过css实现水平居中和垂直居中通过css创建一个水平居中和垂直居中的div是一件比较麻烦的事情，您必须事先知道...

JS实现图片垂直居中显示小结: 第1种，居中效果居中效果 /*第1种，垂直居中效果*/ .box{ width: 200px;height: 200px;border: 1px solid #ccc;... width: 100px;... margin: auto;position: absolute;top: 0;left: 0;bottom: 0;right: 0;

Global site tag (gtag.js) - Google Analytics