【css】div 元素相对于父元素水平居中，margin：0 auto无效的问题

最新推荐文章于 2024-05-30 15:33:48 发布
最新推荐文章于 2024-05-30 15:33:48 发布
阅读量681 收藏 2
点赞数
分类专栏： css 文章标签： css 前端 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_17335549/article/details/126026048
版权

子元素在父元素中，水平居中，使用margin：0 auto; 但是无效，检查如下原因

margin：0 auto 只能设置水平居中

  1. 子元素  需要设置宽度
  2. 子元素 不能是行内元素，不能使用display:inline-block\ inline-flex\inline之类的
  3. 子元素 不能设置浮动float
  4. 子元素 不能使用绝对定位

重点子元素不能使用inline-block\ inline-flex等布局方式，需要是块元素，需要独占一行，才能居中

我有一棵树
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
在IE下，当margin:0 auto;无法使得块级元素水平居中时
11-30
今天遇到使用一个，div元素使用了以下样式 div.wrap{ width:1000px; margin:0 auto;} 在火狐下此div水平居中，但在IE下不居中。 原因是，此div的父级元素没有使用以下样式 div.wrap_parent{text-align:center;} 特此记录
css中margin:0 auto居中问题深入探讨
12-11
在CSS布局中，水平居中是一种常见的需求，而`margin: 0 auto`是一个常用的实现方式。这个样式声明表示元素的上下外边距为0，左右外边距自动调整，以此来达到在父容器内水平居中的效果。然而，很多初学者在尝试使用...
html中使用margin:0 auto整个页面不居中的解决方法
09-28
div style=margin:0 auto这个属怎么弄都不能让页面居中展示，原因是L-Blog默认没有在HTML前加上DTD，于是IE就以HTML而不是XHTML来解释文档
css设置position后为什么margin:0 auto； 失效了
最新发布
staunch_firm的博客
05-30 152
只对非定位元素起作用，它依赖于块级元素的自身宽度和父元素的宽度来实现水平居中。或者使用 flex 布局等。具体的实现方法取决于你的布局需求和具体的元素结构。属性后仍然实现水平居中，可以使用其他方法，例如设置。属性时，它就成为了一个“定位元素”，此时。如有更多问题，请随时提问。不再能够水平居中该元素。当你为一个元素设置了。
margin:0 auto; 居中问题
09-25 1万+
<br />很多初学制作网页的朋友，可能会遇到的一个常见问题，就是在CSS中加了margin:0 auto;却没有效果，不能居中的问题！margin:0 auto;的意思就是：上下边界为0，左右根据宽度自适应！其实就是~~水平居中的意思，呵呵！小一在这里说两个典型的错误引起的不能居中的问题：<br /><br />1、没有设置宽度<br /><div style="margin:0 auto;"></div><br />看看上面的代码，根本没有设置DIV的宽度，如何根据宽度自适应呢？新手比较容易忽略的问题！
b标签设置margin值没用_关于内层DIV设置margin-top不起作用的解决方案
weixin_39688870的博客
12-20 106
(一)近日在做另外一个站点的时候，又遇到这个问题，决定好好的研究解决一下。代码如下：上部层 子层理想中的效果是父层和上部层贴边显示，子层距离父层顶部有200px的距离，在ie中正常，但是在ff中却出现问题，子层和父层贴边了，而父层和上部层却间隔了200px。百思不得其解，求助google，得到如下的一句：当两个容器嵌套时,如果外层容器和内层容器之间没有别的元素,firefox会把内层元素的marg...
margin：0 auto；不居中的原因
水果篮子
07-21 2228
margin：0 auto；不居中可能有以下两个的原因; 1、没有设置宽度 看看上面的代码，根本没有设置DIV的宽度，如何根据宽度自适应呢？新手比较容易忽略的问题！ 2、没声明DOCTYPE ①DOCTYPE是document type（文档类型）的简写，在web设计中用来说明你用的XHTML或者HTML是什么版本。要建立符合标准的网页，DOCTYPE声明是必不可少的关键组成部
css margin:0 auto 不起作用？
Adrian_Liao的博客
02-28 2447
在使用margin: 0 auto;时期望内容居中，但未实现，代码如下： <!DOCTYPE html> <html> <head> <meta charset='utf-8'> <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.mi...
css margin:0 auto居中
09-25
`margin: 0 auto` 是一个常见的CSS技巧，用于实现块级元素在父容器中的水平居中对齐。这个方法主要适用于固定宽度的元素，并且在现代浏览器中表现良好。我们将深入探讨这一概念，以及如何解决不同浏览器之间的兼容性...
css中设置div水平居中，margin:0px auto无用的情况
weixin_33695450的博客
07-21 353
在CSS中加了margin:0px auto;却没有效果，不能实现居中的问题！margin:0px auto;意思就是：上下边界为0。左右依据宽度自适应！就是水平居中的意思.无效的原因是，当你没有设置width时，解释器不知道你的宽度，当然就不会居中。就会到左边去，所以设置width就好了。 ...
css笔记-margin: 0 auto失效的情况
xueguliang的博客
05-20 965
margin: 0 auto只能用于设置了宽度的块级元素 以下情况会失效 块级元素没有设置高宽 ， li { border: 1px dashed #ccc; margin: 0 auto; } 解决 li { width: 210px; height: 60px; border: 1px dashed #ccc; margin: 0 auto; } 应用于加了浮动的块级元素 ，因为浮动脱离了标准流，是不能生效的 li { width: 210px; h
div使用margin:0px auto不居中的原因分析及解决
12-07
一般在将div居中显示时，使用css： 复制代码代码如下: divX {margin:0 auto;} 此css在firefox下是好的，但是在ie下不起作用，网上看到原因如下： 复制代码代码如下: <div id=”cnbruce”>margin: 0 auto 看看内容居中否</div> 如上调试结果，IE6.0是不居中的，当然解决的办法可以是对网页主体“<body>”声明文本居中，即 复制代码代码如下: <style> body{text-align:center} #cnbruce{width:500px; background-color: #ccc; margin: 0
html margin不居中,html – CSS“margin：0 auto”不居中
weixin_42134097的博客
06-20 97
好的,我知道这个话题已被涵盖.但是我已经研究过各种解决方案并且几乎没有成功.我只是不知道为什么这个保证金：0自动;不管用.我尝试用宽度补偿填充：calc(33％ – 40px);但这不起作用.任何帮助解决为什么会这样,解决方案将不胜感激！.container {margin: 0 auto;}[class*='col-'] {float: left;}.col-2-3 {width: 66.66%...
CSS关于margin:0 auto;属性无法居中问题
热门推荐
no2015214099的博客
07-07 1万+
1.首先设置成块级元素（display:block;）,设置width:N px;2.该元素不能浮动3.display:table-cell;的设置会导致失效4.position：absolute;会导致此属性失效PS：自己在敲代码时，在网上查到的只有前3条，但自己犯的是第四条的错误，看了其他网页的源码后参考修改是position:absolute;的原因，会导致margin:0 auto;无法实...
margin:0 auto;无法居中
hgyhep的专栏
06-10 917
今天遇到遇到的一个常见问题，margin:0 auto;无法居中。百度了一把，就是在CSS中加了margin:0 auto;却没有效果，不能居中的问题！margin:0 auto;的意思就是：上下边界为0，左右根据宽度自适应！其实就是~~水平居中的意思，呵呵！小一在这里说两个典型的错误引起的不能居中的问题：1、没有设置宽度看看上面的代码，根本没有设置DIV的宽度，如何根据宽度自适应呢？新手比较
margin: 0 auto没有水平居中怎么回事
z2431435的博客
01-26 1202
1.没有设置宽度width，须设置宽度 2.设置了float:left/right，会自动靠左或靠右
IE下margin:0 auto不居中解决方法
lkl713的专栏
02-09 1388
正常情况下需要将div居中显示时，使用Css样式:margin:0 auto即可，但有时使用margin:0 auto后在FF、Chrome里能居中，而在IE678里不居中的现象。 如下代码: #con{width:980px;martin:0 auto;} margin: 0 auto 内容居中显示 解决方法一 可以是对网页主体声明文本居中，即body{text-ali
margin：0 auto；不能水平居中的原因可能是
weixin_45711746的博客
02-24 386
该元素没有设置宽度； 设置绝对定位或者浮动； 没有声明doctype。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值