margin:0 auto;失效原因

最新推荐文章于 2023-07-08 14:29:37 发布

转载最新推荐文章于 2023-07-08 14:29:37 发布 · 153 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/wangchengb/p/9061529.html

本文介绍了一种使用CSS将元素居中的方法，并附带代码示例。通过设置`margin:0 auto`及父级元素的`text-align:center`实现水平居中效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

margin: 0 auto;/* 需设置其父级元素text-align：center; */

转载于:https://www.cnblogs.com/wangchengb/p/9061529.html

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

weixin_30945039

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

html中使用margin:0 auto整个页面不居中的解决方法

12-13

今天写个jsp页面，乍么调来调去<div xss=removed>123xxx</div> 这个属怎么弄都不能让页面居中展示，而且其它样式也出现莫名其妙的问题后来找这个这个问题的解决方案：原来是L-Blog默认没有在HTML前加上DTD,于是IE就以HTML而不是XHTML来解释文档. 问题并不在CSS而在XHTML网页本身. 需要加上这样的代码才能使得上述设置有效果: 复制代码代码如下: <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xht

css中margin:0 auto居中问题深入探讨

12-11

首先，我们来分析导致`margin: 0 auto`失效的两个常见原因。 1. **没有设置宽度**：`margin: 0 auto` 的居中机制依赖于元素有一个明确的宽度。如果元素的宽度没有被定义，浏览器无法计算出左右外边距的自动值，因此...

参与评论您还未登录，请先登录后发表或查看评论

margin:0 auto没效果是什么原因

qq_44176252的博客

03-03

7967

首先进行了一个html的布局，一个div标签分别包含行内标签和块级标签，我想在居中的元素里再使用margin：0 auto居中。第二步给div,p,span三个属性进行添加css样式，同样是添加了margin：0 auto，但只有div居中效果如下：第三步：问题所在，后来发现， 1.如果当前元素没有设置宽高属性的情况下，margin:0 auto是不起任何效果的； 2.如果当前元素使用百分比设置宽高，margin:0 auto同样不起效果 3.如果是行内元素，需要先转化为块级元素，注行内块不行，

margin：0 auto无效原因

weixin_44501490的博客

03-09

4722

1、没有给要居中的元素设置宽度 2、该元素position值为absolute 3、该元素设置了浮动属性几点说明：对于有上下边偏移的相对定位的盒子，margin auto是有效的。对于有左右边偏移的相对定位的盒子，margin auto也是有效的，只是在居中的基础上会偏差一个left或right值。当left或right为0时，水平居中。当div宽高都设置了百分比，又设置margin：0...

img标签使用 margin : 0 auto 无效

god_wen的博客

12-24

6265

因为img 是内联元素，想要使用mmargin : 0 auto 前必须转换为块元素img{display:block}

margin:0 auto居中无效

weixin_30722589的博客

08-05

268

让最外层DIV在IE浏览器中水平居中，除了对其设置margin:0 auto外，一般还要对body设置样式，但一般高版本浏览器无须设置此css样式也能使DIV居中，低版本IE比如IE6和对标准比较严格浏览器需要设置text-align:center。有时不经意对要居中的最外层设置float:left或float:right也是造成设置margin:0 auto布局不能水平居中原因。因为设置...

在IE下，当margin:0 auto;无法使得块级元素水平居中时

11-30

本文将深入探讨在Internet Explorer（IE）浏览器中，为何`margin: 0 auto;`在某些情况下无法使块级元素水平居中，并提供解决方案。首先，`margin: 0 auto;`这个CSS声明通常用于使具有固定宽度的块级元素在容器内...

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

09-25

本篇文章将深入探讨`margin: 0px auto` 不居中的原因，并提供相应的解决方案。首先，让我们了解`margin: 0px auto` 的工作原理。当一个块级元素的左右外边距设置为自动时，浏览器会自动计算两边的外边距，使元素在...

为什么用margin：0 auto无效？

webdowhatIlike的博客

11-21

2142

1.给父元素设置这类margin 需要子元素是块级元素 displayinline/flex/inlineblock都不行 2.子元素如果是块元素则可能是没有设置宽度块级元素默认宽度是屏幕宽度所以没有宽度会导致无效 ps：当不知道盒子的问题出在哪里时考虑给他➕border 便于观察和调整

margin：0 auto；失效的原因

depers15的博客

06-19

4837

怎样设置水平居中？ .temp{ margin: 0 auto; }若上述方法出错的原因： 1.要给居中的元素一个宽度，否者无效。2.该元素一定不能浮动，否者无效。3.在HTML中使用标签，需考虑好整体构架，否者全部元素都会居中的。如果还有错误是什么原因呢? 这个的解决方法就是新建一个新的div元素，这样就可以避免该方法失效！

解决使用绝对定位absolute后，margin：0 auto居中方法失效

小张的blog

07-08

425

在浏览器中div如果没有设置宽度，那么宽度自动为浏览器的宽度，这是给div设置宽度后，div会靠左显示，margin:0 atuo就是为了填充右侧的空白空间。但是<img>当不设置宽度时，不会块级元素一样宽度默认和浏览器相同，所以不能用margin：0 auto来居中，因为img是行内的块级元素。margin:0 auto的理解是，上下边距为0，左右边距为auto（auto是自动调整大小）当给一个块级元素设置宽度后，使用margin:0 atuo可以实现水平上的居中。需求：需要把圆形头像居中显示。

解决设置margin: 0 auto 失效的问题

xiaoshengbuzao的博客

12-02

2534

一、判断是否有设置盒子的宽高 weight height 二、判断是否设置了绝对定位 position:absolute 设置了绝对定位会脱离标准文档流（网页默认的文档格式），设置的margon:auto是针对文档流的元素，自然失效别用absolute 三、判断是否使用浮动 float的设置也会脱离文档流清浮动，用div包裹四、判断行内元素是否失效需要设置成displ...

CSS盒模型-4.4外边距-margin左右属性值设为autoa时，可以设置元素左右居中显示-大厂面试中，经常问道的一个关于margin的问题！非常重要！块级叠加40内联60

qq_44280574的博客

08-30

869

1.什么是外边距外边距是指元素边框之外的区域设置外边距会在元素外围创建额外的空白空间外边距的作用是控制元素和元素之间的距离使用margin属性来设置外边距还可以使用margin-top、margin-bottom、margin-left、margin-right 分别控制元素不同方向的外边距属性值可以是长度值或者百分比，如果为长度值，不能为负值 ...

margin:0 auto什么时候会失效

热门推荐

qq_37621289的博客

09-30

1万+

对于普通的盒子，margin auto是不会失效的。对于浮动的盒子，margin auto会失效。对于没有边偏移的相对定位的盒子，margin auto是有效的。对于有上下边偏移的相对定位的盒子，margin auto是有效的。对于有左右边偏移的相对定位的盒子，margin auto也是有效的，只是在居中的基础上会偏差一个left或right值。当left或right为0时...

margin:0 auto无效原因

sly94的博客

05-13

2064

1.float会导致margin:0 auto无效 2.必须要有width

为什么有时候margin:0 auto;没有用

美丽的大黄人

07-01

3475

为什么有时候margin:0 auto;没有用很有可能你要居中的元素未设置宽度！！！

关于IE9下margin: 0 auto;失效问题

itSeven7的博客

06-26

1467

今天在做一个浮动的分页器，测了一下IE9浏览器下居然不能居中，然后找了下原因，是因为子级使用了浮动导致了在IE9下margin：0 auto属性失效了；解决方法：将自己的浮动样式去掉；添加上display:inline-block;属性，分页器就自动居中了；

【CSS】margin:0 auto;——使用条件/应用场景/不生效无效果的原因

qq_25677349的博客

07-07

1561

margin:0 auto；在不同场景下生效条件如下：块级元素：给定要居中的块级元素的宽度。行内元素：①设置display:block；②给定要居中的行内元素的宽度。（行内元素设置成块级元素后可以对其宽高进行设置）行内块元素：设置display:block。（如input、button、img等元素，自带宽度可以不用设置其宽度）注： ①...

margin:0 auto 不起作用的原因

qq_23159841的博客

11-24

3168

https://blog.youkuaiyun.com/qq_43719932/article/details/90574700 块级元素的定位是绝对定位，即position:absolute。因为margin可以理解为，规定该元素与其他元素的距离。那么就说明该元素应在文档流之中，这样才能计算auto。块级元素应该没有给定的宽度。如width:10px 或是width:10%等 img标签 margin:0 auto失效 ...

html margin:0 auto不居中