css中设置div水平居中，margin:0px auto没用的情况

最新推荐文章于 2021-07-14 15:16:33 发布
最新推荐文章于 2021-07-14 15:16:33 发布
阅读量1.9w 收藏 3
点赞数 3
分类专栏： html+css+js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/liang5630/article/details/39030799
版权

在CSS中加了margin:0px auto;却没有效果，不能实现居中的问题！margin:0px auto;意思就是：上下边界为0，左右根据宽度自适应！就是水平居中的意思.无效的原因是，当你没有设置width时，解释器不知道你的宽度，当然就不会居中，就会到左边去，所以设置width就好了。

溺水行舟
关注
  • 3
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
CSS之“绝对定位”的盒子使用margin:0px auto；不能实现水平居中的解决方案
鸭绒的博客
07-09 2548
在盒子实现水平居中的布局中，我们经常直接使用margin:0px auto;来实现居中，在很多时候的确可以一句这样的代码就实现了，但在绝对定位的盒子中，这是不起作用的。 1.根据代码测试是否真如上面所说： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width.
css margin:0 auto居中
09-25
在提供的代码示例中，有一个内部的红色方块`div`，其宽度为50px，通过`margin: 0 auto`设置，尝试在外部的灰色背景`div`中居中。然而，如果缺少合适的文档类型声明（DOCTYPE），某些浏览器可能进入怪异模式，导致CSS...
通过margin:0px auto来实现一列固定宽度居中
01-21
复制代码代码如下: XHTML CODE： <div id=”layout”>一列固定宽度居中</div> CSS CODE： 复制代码代码如下: #layout{ background-color:#C7E091; border:2px solid #B0BCA6; width:400px; height:300px; margin:0px auto;/*外边距参数*/ }
div居中
qq_39114437的博客
06-09 2万+
HTML的div居中 一、margin:0px auto; 给需要居中的div设置一个宽度，然后设置元素的上下外边距为 相等 左右外边距为 auto，比如，margin:0px auto。 则可以实现 div 居中显示。 对于浮动元素，设置其左右外边距为关键字 auto 是无效的。此时，如果需要设置其居中显示， 可以： 1、 精确计算其左外边距并进行设置，实现居中显示； 2、 使用一个居中显示的 div 元素包含此浮动元素。 代码： <!DOCTYPE html> <html lang="
关于margin: auto及margin: 0 auto的一些见解
路漫漫其修远兮，吾将上下而求索
06-15 9710
在写css时margin:auto;使用频率非常高，常用于div的居中。 何为margin？ margin是指块级元素的外边距，如下图所示，XXXXX是div中的内容，通过设置margin的值，可控制div与其他块级元素的距离 margin设置不同数量的值时的含义 我们常看到 margin:auto; margin: 0px auto; margin: 10px 20px 30px 40px; 相关的语句，当margin有不同数量的值时，其含义分别是什么？ 首先margin最多有.
margin:0px auto;
Noahの梦想
10-30 1014
auto是页面左右留白相同的意思上下留白为0px,左右适当留白切空间相等默认情况下,内部div是在外部div的左上方当设置了margin:0px auto;后内部div就会在div居中...
{margin:0px auto}让div居中的具体含义以及原理
weixin_34161064的博客
03-20 329
{margin:0px auto}让div居中的具体含义以及原理auto就是“一样”的意思，如果是左右auto的话，意思就是：这个 DIV 离 左边的距离 跟 右边的距离 是一样的。margin:0px auto；就是上下的距离是0px，左右的距离是“一样”。{ margin-right: auto; margin-left: auto;}如果是这样写呢,有点感觉代码繁杂,于是就可以简写成这样.....
div使用margin:0px auto不居中的原因分析及解决
12-07
一般在将div居中显示时，使用css： 复制代码代码如下: divX {margin:0 auto;} 此css在firefox下是好的，但是在ie下不起作用，网上看到原因如下： 复制代码代码如下: <div id=”cnbruce”>margin: 0 auto 看看内容...
纯css多种方法实现div中单行文字、多行文字及嵌套div垂直水平居中
09-25
在CSS布局设计中，垂直居中和水平居中是一大挑战，尤其是垂直居中由于浏览器兼容性和CSS属性的限制，往往比水平居中更难实现。以下是一些使用纯CSS实现垂直水平居中的方法，包括对单行文字、多行文字以及嵌套div的...
CSS margin:0 auto介绍
杨春建的博客
09-01 1986
原文地址：http://www.divcss5.com/rumen/r773.shtml 一、CSS margin认识   -   TOP margin设置对象外边距,如果我们给DIV设置一条边框线(border)样式后，在DW软件里即可看出margin设置值其实是在边框外距离，此样式设置对象（DIV）之间间距的样式。 详细介绍见：margin教程 二、margin:0
CSS——margin : 0 auto;
u012194956的博客
04-04 1457
1. margin : 0 auto表示啥？表示上下外边距为0，左右外边距自适应。也可以拆分为：margin ： 0 auto 0 auto；（上 右 下 左）。单独写的话，可以拆分成：margin-top：0；margin-right：auto；margin-bottom：0；margin-left：auto；2.margin：0 auto的作用是啥？一般是用在外层div上的属性。为了让div在...
margin:0 auto为什么会失效
得之我幸
06-19 1万+
1.没有指定宽度 解决：设置width 结论：分别给要居中的元素添加了指定宽度，没变化，说明不是这个原因 2.浮动、绝对定位、固定定位的盒子失效 结论：看不见有这方面的设置啊，排除 3.行内元素失效 解决方法：①设置display:block；②给定要居中的行内元素的宽度。（自带宽度的input/button等元素无需设置宽度） 结论：我设的div啊，排除 4.display:table-cell...
CSS margin：0 auto
LOCK597的博客
07-14 1647
margin:0 auto；在不同场景下生效条件如下： 块级元素：给定要居中的块级元素的宽度。 行内元素：①设置display:block；②给定要居中的行内元素的宽度。（行内元素设置成块级元素后可以对其宽高进行设置） 行内块元素：设置display:block。（如input、button、img等元素，自带宽度可以不用设置其宽度） 注： ①可以通过对块级元素设置 text-align：center；的方式来实现内联元素（如文本、图片）居中 ②margin:0 auto;可以使盒子
margin: 0 auto 水平居中原理
辰辰沉沉大辰沉
07-14 6457
在 CSS 居中布局界，这可以说是一个烂梗了。但如果继续追问其原理，很多人就语焉不详了。**网络中很多文章有两个问题：描述不全面或者延伸太广，难以聚焦，时间一长容易遗忘**。 所以写这篇文章的目的是在收敛知识扩展面的同时又能抓住要点，就算时间久了也可以从要点出发把整个原理。
元素居中使用margin:0 auto;为何没效果
Academia_zhen的博客
02-21 9899
内敛块元素和内敛元素设置居中要变成块元素才能使用margin:0 auto; 内敛元素和内敛块元素没有宽度的时候即使设置成margin:0 auto;也不管用， 自带宽度的除外，比如button和input等。也可以对父元素设置text-align:center; 因此要对要剧中的元素设置display:block;width:Npx;margin:0 auto;
【CSS】margin:0 auto;——使用条件/应用场景/不生效无效果的原因
热门推荐
weixin_39068791的博客
06-09 6万+
margin:0 auto；在不同场景下生效条件如下：         块级元素：给定要居中的块级元素的宽度。         行内元素：①设置display:block；②给定要居中的行内元素的宽度。（行内元素设置成块级元素后可以对其宽高进行设置）         行内块元素：设置display:block。（如input、button、img等元素，自带宽度可以不用设置其宽度）   ...
form设置margin:0px auto不生效
感恩、奋进、自信
10-15 2397
我们知道要想让一个组件水平居中，只要设置下面两行代码就可以了： display：block; margin:0px auto; 但是给form这样设置，却达不到水平居中的效果。 解决方法：给form设置属性width，即给form设置一个宽度。 如下面的写法就可以让form水平居中了： width:200px; display：block; margin:0px auto;
margin:0 auto什么时候会失效
qq_37621289的博客
09-30 1万+
对于普通的盒子，margin auto是不会失效的。 对于浮动的盒子，margin auto会失效。 对于没有边偏移的相对定位的盒子，margin auto是有效的。 对于有上下边偏移的相对定位的盒子，margin auto是有效的。 对于有左右边偏移的相对定位的盒子，margin auto也是有效的，只是在居中的基础上会偏差一个left或right值。当left或right为0时...
css中设置div水平居中，margin:0px auto无用的情况
最新发布
05-20
当使用`margin: 0px auto`无法实现div水平居中时，可以尝试以下方法： 1. 确保该div是块级元素，并且宽度已经设置了。 2. 确保该div的父元素也是块级元素，并且其宽度大于等于该div的宽度。 3. 使用Flex布局。设置父元素的`display: flex`和`justify-content: center`即可实现水平居中。 4. 使用绝对定位。设置该div的`position: absolute`和`left: 50%`，然后再使用负的`margin-left`将其居中。 5. 使用CSS Grid布局。设置父元素的`display: grid`和`justify-items: center`即可实现水平居中。 以上方法中，建议使用Flex布局或CSS Grid布局，因为它们更加灵活和方便。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值