`
1018596088
  • 浏览: 3350 次
  • 性别: Icon_minigender_1
  • 来自: 成都
社区版块
存档分类
最新评论

正确的使用margin:0 auto与body{text-align:center;}实现元素居中

阅读更多
body{text-align:center}与margin:0 auto的异同?

text-align是用于设置或对象中文本的对齐方式。一般情况下我们设置文本对齐方式的时候需要用此属性进行设置

我们设置某个对象水平方向居中的时候,常常将左右的外边距设置为auto来实现

text-align:center设置为文本或img标签等一些内联对象(或与之类似的元素)的居中。margin:0 auto是设置块元素(或与之类似的元素)的居中。但这两个属性IE与FF的理解也有所不同。

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

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

有三种情况需要说明:

  一、有朋友在操作的时候,将margin:0 auto;的选择器混淆了,应该是作用对象,如div,p,而不是body。如果设置:body { margin:0 auto; }将不会达到任何效果,除非你定义body的宽度,那将会让body内的元素产生位置变化。如我们设置body宽度为500px。对p段落不作任何设置,我们最大化窗口将会看到段落并非处于窗口的最左上角。

  二,我们设置段落 p {text-align:center;} 将要实现的并不是段落本身的对齐方式,而是段落内元素居中对齐。

  三,我们设置图片标签img {margin:0 auto;} ,我们就犯了一个小错误,img类于内联对象,不可以设置图片img标签的margin属性,如果你一定想要设置,那么首先要将它的属性转变为块元素,如下面的代码:img {display:block; margin:0 auto;}

如果页面中的元素,均位于div标签或其它块元素内,进行了合理的嵌套,我们不必设置body{text-align:center}。只需要设置相应的div元素margin:0 auto;即可。如上面的代码所讲述,页面中的元素均位于段落p标签中,只需要将段落居中即可。

  如果页面中的元素,有一部分不是在div标签或其它块元素内,我们需要设置body{text-align:center}。但也会遇到问题,这样设置以后,大部分内联元素,都居中对齐了,包括页面中其它的一些文本,还需要进行相应的调整才能适应设计的需要。如:我们设置body内有一个段落P,在段落内有一个图片img及一段文本,在body内还存在一个独立的图片img。

我们实现了段落p的居中,同时也让位于段落外的图片实现了居中,但段落中的图片与文本居中对齐了。
分享到:
评论

相关推荐

    让IE也支持margin居中告别text-align:center

    通常,我们有两种主要的方法来实现元素的水平居中:`text-align:center` 和 `margin: auto`。这篇文章将重点讨论如何在Internet Explorer (IE)浏览器中使用`margin: auto`实现居中对齐,以及为什么在某些情况下IE...

    CSS中元素水平居中显示的方法.pdf

    设置`text-align: center`到父元素,如`body`,可以使元素内部的内容居中。但这种方式会导致所有子孙元素都居中,所以通常需要额外的CSS规则来恢复默认的左对齐: ```css body { text-align: center; } ....

    CSS教程:水平对齐(text-align)

    要实现跨浏览器的整体居中,通常需要结合其他CSS属性,如设置容器宽度和使用`margin: 0 auto;`。以下是一个例子: ```css body { text-align: center; /* 在IE内居中 */ } #wrap { width: 90%; /* 设定宽度才能...

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

    通过将`text-align`属性设置为`center`,可以使得元素内的文本居中,如果将这个属性应用到容器元素(如`body`),则容器内的所有子元素也会居中。但这是一种hack,因为`text-align`通常用于控制文本而不是整个元素...

    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; ...

    三种居中.docx

    其中,最常用的方法是结合`margin: 0 auto`和`text-align: center`来实现。 - `margin: 0 auto`:这个CSS规则可以使一个设置了宽度的块级元素在其父元素中水平居中。例如: ```css #wrap { width: 760px; margin...

    CSS网页布局DIV水平居中的各种方法

    对于不支持`margin: auto`的浏览器(如IE6),可以使用`text-align: center`属性。由于这个属性在父元素中设置后会传递给子元素,因此可以在`body`标签中设置`text-align: center`,然后在Div中设置`text-align: ...

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

    这种方法适用于块级元素,通过设置`margin-left`和`margin-right`为`auto`来实现居中。例如: ```css div#container { margin-left: auto; margin-right: auto; width: 168px; } ``` 这种方法在大多数现代...

    css margin:0 auto居中

    在网页设计中,CSS(层叠...在处理浏览器兼容性问题时,可以通过调整`body`的`text-align`属性,或者使用`display`和`margin`组合来实现跨浏览器的居中效果。理解这些概念和技巧,将有助于你在网页布局中更加得心应手。

    css控制div中元素居中的示例.pdf

    另一种实现元素居中的方法是使用 text-align 属性,设为首页 将该属性值设置为 center 并应用到 body 元素上即可。这种做法是彻头彻尾的 hack,但它却能兼容大多数浏览器,所以在某些情况下也自然必不可少。 之所以...

    CSS中元素水平居中显示的方法.docx

    这种方法适用于整个页面的水平居中,只需在`body`上设置`text-align: center`,并在需要居中的子元素上使用自动外边距。但需要注意,这种方法不适用于垂直居中。 6. **使用背景定位实现图片居中** 当需要图片在`...

    Div+CSS布局居中.docx

    首先,通过`text-align: center`使父元素居中,然后使用自动外边距使子元素在父元素内部居中。这样可以在大部分浏览器中实现较好的居中效果,但依然需要为子元素的文本对齐进行额外的样式定义: ```css body { ...

    Div+CSS布局居中.pdf

    通过设置`text-align`属性为`center`,可以使得元素内的文本居中,但这种方法实际上会将所有子孙元素都居中。因此,可能需要额外的CSS规则来调整文本对齐。例如: ```css body { text-align: center; } p { ...

    DIV+CSS中让布局居中.docx

    在这种情况下,我们需要为包含这些浮动元素的父级容器设置宽度,并使用`margin: 0 auto;`来实现水平居中。例如,如果页面宽度为700px,对应的CSS样式可以写为: ```css .weicheng { margin: 0 auto; width: 700px...

    div使用margin:0px auto不居中的原因分析及解决

    一般在将div居中显示时,使用css: 复制代码代码如下: divX {margin:0 auto;} 此css在firefox下是好的,但是在ie下不起作用,... body{text-align:center} #cnbruce{width:500px; background-color: #ccc; margin: 0

    DIV+CSS常用的网页布局代码

    - 使用`<div>`元素嵌套来实现复杂的多列布局。 - `clear: both;`:清除所有浮动,避免后续元素受到浮动元素的影响。 #### 三、总结 通过以上示例可以看出,**DIV+CSS**提供了极其丰富的布局手段,无论是简单的...

Global site tag (gtag.js) - Google Analytics