align_center在JAVA_margin:0 auto与body{text-align:center;}实现元素居中的区别
在IE與FF中,段落P均實現(xiàn)了居中對齊。圖片img由于不是作用對象,所以不會居中對齊。
有三種情況需要說明:
1.margin:0 auto;的選擇器是作用對象,如div,p,而不是body。如果設(shè)置:body { margin:0 auto; }將不會達到任何效果,除非你定義body的寬度,那將會讓body內(nèi)的元素產(chǎn)生位置變化。如我們設(shè)置body寬度為500px。對p段落不作任何設(shè)置,我們最大化窗口將會看到段落并非處于窗口的最左上角。
2.設(shè)置段落 p {text-align:center;} 將要實現(xiàn)的并不是段落本身的對齊方式,而是段落內(nèi)元素居中對齊。
3.設(shè)置圖片標簽img {margin:0 auto;} ,就犯了一個小錯誤,img類于內(nèi)聯(lián)對象,不可以設(shè)置圖片img標簽的margin屬性,如果一定要設(shè)置,那么先將它的屬性轉(zhuǎn)變?yōu)閴K元素,如下面的代碼:img {display:block; margin:0 auto;}
如何使用:
1.如果頁面中的元素,均位于div標簽或其它塊元素內(nèi),進行了合理的嵌套,我們不必設(shè)置body{text-align:center}。只需要設(shè)置相應(yīng)的div元素margin:0 auto;即可。如上面的代碼所講述,頁面中的元素均位于段落p標簽中,只需要將段落居中即可。
2.如果頁面中的元素,有一部分不是在div標簽或其它塊元素內(nèi),我們需要設(shè)置body{text-align:center}。但也會遇到問題,這樣設(shè)置以后,大部分內(nèi)聯(lián)元素,都居中對齊了,包括頁面中其它的一些文本,還需要進行相應(yīng)的調(diào)整才能適應(yīng)設(shè)計的需要。如:我們設(shè)置body內(nèi)有一個段落P,在段落內(nèi)有一個圖片img及一段文本,在body內(nèi)還存在一個獨立的圖片img,看下面的圖片
我們實現(xiàn)了段落p的居中,同時也讓位于段落外的圖片實現(xiàn)了居中,但段落中的圖片與文本居中對齊了
總結(jié)
以上是生活随笔為你收集整理的align_center在JAVA_margin:0 auto与body{text-align:center;}实现元素居中的区别的全部內(nèi)容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: ajax 获取java数据_如何使用Aj
- 下一篇: java 求集合平均数_图像二值化方法介