在div p{margin:0 auto; width:80px;}中为什么要给p设宽度,不设宽度就居中不了啊

1,写成div p{text-alignt:center;}同样可以实现效果,text-align和margin使用区别是什么。,
2,为什么给p设宽度才能使margin实现效果。我的理解是就是在盒子模型里,margin是管盒子与盒子的,里面的内容用margin无效,要有效就得给把内容伪装成盒子就是设个宽度。这样理解有问题吗

基本概念:

1.text-align: 属性规定元素中的文本的水平对齐方式; 

       该属性通过指定行框与哪个点对齐,从而设置块级元素内文本的水平对齐方式;

       一般情况下设置文本对齐方式的时使用此属性。支持值 justify。

  Example: div { text-align: left; }  //文本居左对齐

  注释:所有浏览器都支持 text-align 属性;任何的版本的 Internet Explorer (包括 IE8)都不支持属性值 "inherit"。

2.margin 是设置对象四边的外延边距,被称为外补丁或外边距。

  Example: div { margin: 20px 10px 30px 40px; }  // 表示对象外边距,顶20px、右10px、下30px、左40px

区别如下:

1.text-align:center 设置文本或img标签等一些内联对象(或与之类似的元素)的居中。

2.margin:0 auto 设置块元素(或与之类似的元素)的居中。

这两个属性IE与FF的理解也有所不同。我们设置一个段落P,在段落内存在一个图片img标签。  

注意:

1.当设置body{text-align:center;}。
在IE中,段落P,图片img同时实现了居中对齐,也就是说text-align:center;同时作用于元素p与元素img。
在FF中,段落P,没有能实现居中对齐,而图片img实现了居中对齐,也就是说text-align:center;作用于img标签,而段落p标签没有
起到居中的作用。

2.当设置段落 p {margin:0 auto;}。 在IE与FF中,段落P均实现了居中对齐。图片img由于不是作用对象,所以不会居中对齐。

有三种情况需要说明: 1.margin:0 auto;的选择器是作用对象,如div,p,而不是body。如果设置:body {
margin:0 auto;
}将不会达到任何效果,除非你定义body的宽度,那将会让body内的元素产生位置变化。如我们设置body宽度为500px。对p段落不作任何设置,
我们最大化窗口将会看到段落并非处于窗口的最左上角。 2.设置段落 p {text-align:center;}
将要实现的并不是段落本身的对齐方式,而是段落内元素居中对齐。 3. 设置图片标签img {margin:0 auto;}
,就犯了一个小错误,img类于内联对象,不可以设置图片img标签的margin属性,如果一定要设置,那么先将它的属性转变为块元素,如下面的代
码:img {display:block; margin:0 auto;}



margin:0 auto;是使自身在浏览器内居中,需要配合宽度使用:

text-align:center;是使标签的内容居中:



CSS常见的让元素水平居中显示的方法

    使用自动外边距实现居中

    使用text-align实现居中

    组合使用自动外边距和文本对齐

    负外边距解决方案

温馨提示:内容为网友见解,仅供参考
第1个回答  2017-06-18
text-alignt 是给文本图片用的
margin 是给块容器用的
p无效是因为p的宽度和父级div宽度一样 效果看不出来了

在div p{margin:0 auto; width:80px;}中为什么要给p设宽度,不设宽度就...
有三种情况需要说明: 1.margin:0 auto;的选择器是作用对象,如div,p,而不是body。如果设置:body { margin:0 auto; }将不会达到任何效果,除非你定义body的宽度,那将会让body内的元素产生位置变化。如我们设置body宽度为500px。对p段落不作任何设置, 我们最大化窗口将会看到段落并非处于窗口的...

...margin:0 auto; 为什么body中的所有div元素不能居中显示呢_百度知 ...
margin:0 auto; 是这样用的;譬如body里面有个div,你将div设置这个值并且要设置宽度div就可以相对body居中了。换种说法是设置容器里面的元素为margin:0 auto;

元素设置margin:0 auto;后不居中?
牵强点解释,都已经脱离文档流了,那么就不归父标签关了。所以就没有办法根据父元素自动适应。position:abosulte;具有破坏性,会导致父元素的边界崩塌。也是原因之一。推荐你慕课看看CSS深入理解之absolute

margin0 auto为什么会失效
1.没有指定宽度 解决:设置width,可以是100 结论:分别给要居中的元素添加了指定宽度,没变化,说明不是这个原因 2.浮动、绝对定位、固定定位的盒子失效 结论:看不见有这方面的设置啊,排除 3.行内元素失效 解决方法:①设置display:block;②给定要居中的行内元素的宽度。(自带宽度的input\/button等...

div中position:absolute 和margin :0 auto 同时存在,不能水平居中
肯定不行了啊,绝对定位以后就脱离了父级盒子,只能以父级为参考进行定位,你可以理解为绝对定位以后就浮在了父级上面,所以margin中auto就没有了参考值,如果绝对定位以后还想居中,可以left:50%;margin-left:负的盒子宽度的一半即可。

我想让整个DIV居中,设置了margin:0px auto; 为什么它还是一直往左对齐...
再给这个div设置个宽度。。。不设置的话默认div宽是100%所以就不会居中

为什么margin: 0 auto会让div居中
margin 可以有4个值,分别对应影响的方向是上,右,下,左, 2个值的时候,对应第一个值是 控制上下距离,第二个值是控制左右, 所以magrgin:0 auto, 就是上下距离为0,auto是自适应,这里指的是左右两个方向的距离一样,也就是说,不论你的宽度怎么变化,都是两个方向距离一样,形成居中...

DIV+CSS打了MARGIN:0PX AUTO为什么居中不了
如果 该容器的外层是 body的话 MARGIN:0PX AUTO 火狐可以居中 ie不居中 为了兼容ie 需要 给body标签 也加上 text-align:center ,这个时候 该容器也继承了 body 的 text-align:center (内容居中)这个时候 还需要设置 该容器的 text-align:left 就可以了。div+css 兼容浏览器问题。

为什么设置div{margin:0px auto 0px auto;}之后,div不居中??
浏览器的不同,会有些不同的。你知道在这个DIV的父级,家一个text-align:center;这样就居中了 比如 <head> <style> body { text-align:center;} div{ margin:0 auto;} <\/style> <\/head> <body> <div> ergertg<\/div> <\/body>

用margin:0px auto;怎么不能居中
padding 0去掉,1.在body中加入text-align:center 2.给你的DIV外加个DIV,比如一个宽度1440px的DIV,然后这个id的div会自动居中到那个宽度1440的div里

相似回答