Margin:0 auto和 text-align:center区别?

2020-06-04 19:49发布

3条回答
Vip001
2楼 · 2020-06-04 20:16

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


Dillion
3楼 · 2020-06-04 21:32

text-align:center 用于设置块级元素内容居中

margin:0 auto;用于设置块级元素自身居中

Sauvignon
4楼 · 2020-06-05 09:35

margin:0 auto;是元素水平居中;

text-align:center;是文本水平居中。

相关问题推荐

  • 回答 11

    前端即网站前台部分,运行在PC端,移动端等浏览器上展现给用户浏览的网页。简单地说,能够从 App 屏幕和浏览器上看到的东西都属于前端。前端技术一般分为前端设计和前端开发,前端设计一般可以理解为网站的视觉设计,前端开发则是网站的前台代码实现,包括基...

  • 回答 9

      inputname=type=textstyle=width:200px;height:20px;

  • 回答 18

    一般在4.5个月左右。

  • 回答 15

    女生零基础学web前端是不难的。这是比较注重实际动手操作的学科,只要你肯用心学,并且有专业老师的指导,女生零基础学web前端,只需要4个月左右的时间

  • 前端适合女生学吗?2020-06-02 17:42
    回答 14

    很适合女生学习,主要是看自己在这方面有没有兴趣

  • 回答 9

    CSS主要的作用就是给网页中的dom元素设置样式,选择器则是用来匹配dom元素的。CSS中的选择器有三种,分别是标签选择器(根据元素标签名称),类选择器(根据元素class属性),id选择器(根据元素id属性),并且三种选择器可以相互结合使用例如:body{background-col...

  • 回答 17

    html、css、js、框架、小程序等

  • 回答 11

    根据自己的兴趣和实际情况来选择编程:Java、大前端、Python人工智能、大数据、Linux云计算、软件测试、PHP、网络安全设计:UI设计、产品经理、三维可视化设计、影视动画、室内设计、VR/AR运营:互联网营销、新媒体运营、短视频运营、电商运营每个人都是不同...

  • 回答 7

    HTML123倒计时JS//验证码var counts = 60;function settime(val) {     if(counts == 0) {         val.removeAttribute(disabled);         val.value = 获取验证码;         counts = 60;         return...

  • 回答 5

    HTML中有个class为box的div元素,通过修改css样式让box元素在页面水平垂直居中显示  

  • 回答 11

    HTML,CSSJavaScriptjQueryvue,React微信小程序,公众号

  • 回答 7

    对于前端初学者来说,html+css是入门前端最基础的内容,要学好并熟练运用html+css可从以下几点出发: 1.结合html+css+Photoshop,学会如何切割页面。所谓切图是指将设计稿切成便于制作成页面的图片,并完成html+css布局的静态页面。 2.打开有关浏览器网页,参...

  • 回答 7

    html如何让文字居中显示通过设置左右margin值为auto来实现居中的。我们来看个例子就是专设置属div这个块状元素水平居中:html代码:div{border:1pxsolidred;/*为了显示居中效果明显为div设置了边框*/width:200px;margin:20pxauto;/*margin-left与margin-right...

  • 回答 3

    有关块与内联元素的心得(内联元素右对齐)未改代码:目的:将日期右对齐,但下面的代码,把含日期内联元素转为块元素,再让其向右浮动,但结果显得为错位显示.未能达到预期目的. New Document #css01{width:360px;height:300px;text-align : left; float:left;margin...

没有解决我的问题,去提问