文章 专题 AI工具 学习 下载 问答 源码 最近更新
PHP
会员中心 讲师中心 微信公众号
首页 > web前端 > css教程 > 正文

css中margin:0 auto无效的解决办法

黄舟
发布： 2017-07-21 13:41:34
原创
5151人浏览过

css中margin:0 auto无效的解决办法

1

2

3

<div class="div1" style="width:100%; height:60px; float:left; background:#CCC;">

<div class="div2" style="width:auto; height:100%; margin:0 auto; background:#F00;">111111111</div>

</div>

登录后复制

div1宽度是屏幕宽度，div2宽度随内容大小而定并居中与div1，但div2的宽度我设成auto后宽度还是div1 100%的宽度，为什么会这样？研究了整晚都没搞懂，希望有高手可以解答？

给div2外面套一个div3，设置div3为水平居中显示，即text-align:center;div2设置为内联元素，即display:inline;这样就可以啦。

1768.jpg

　　div默认为块级元素，块级元素都是独自占一行的，宽度默认为100%的。

立即学习“前端免费学习笔记（深入）”；

在IE8下运行此段代码  没有居中  除了body设置text-align:center  还有其它解决方法吗？

1

2

3

4

5

6

7

8

9

<!doctype html><html>

    <head>

        <style>

            .tcenter{                width:500px;                margin:0 auto;

            }        </style>

    </head>

    <body>

        <div class="tcenter">没有居中。。</div>

    </body></html>

登录后复制

亲测IE8居中没问题

1769.png

你要文字居中就设置.tcenter{text-align:center}

margin:0 auto; 是让div居中的，不是让文字居中的。

以上就是css中margin:0 auto无效的解决办法的详细内容，更多请关注php中文网其它相关文章！

最佳 Windows 性能的顶级免费优化软件
最佳 Windows 性能的顶级免费优化软件

每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。

下载
相关标签：
css
来源：php中文网
收藏 点赞
上一篇：css中关于auto属性的使用详解 下一篇：css：margin:0 auto在ie8下面不能居中的解决办法
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
作者最新文章
最新问题
CSS如何创建毛玻璃效果？backdrop-filter指南 设置元素背景为半透明，使用rgba()或hsla()定义背景色以保留backdrop-filter的作用空间；2.应用backdrop-filter属性，结合blur()、brightness()、saturate()等滤镜函数实现毛玻璃的模糊与色彩效果；3.注意兼容性，为旧版浏览器添加-webkit-前缀并使用@supports提供回退方案；4.避免层叠上下文问题，确保元素与背景内容处于正确的渲染层级；5.优化性能，控制模糊半径、减少复杂滤镜使用，并在动态场景下谨慎使用will-change，
2025-08-24 15:11:01
471
CSS如何实现藏文与中文混排？text-orientation 要实现藏文与中文在竖排场景下的正确混排，关键在于使用text-orientation:upright确保字符直立；1.设置writing-mode:vertical-rl以启用竖排布局；2.使用text-orientation:upright强制中文、藏文及拉丁字符均保持直立，避免旋转；3.选择支持双文字的统一字体，如Noto系列；4.调整line-height优化行间距；5.通过text-align控制对齐，text-combine-upright处理横向字符组合；6.解决字体缺失、渲染差异、
2025-08-24 15:01:01
900
CSS怎样制作韩文特殊换行效果？word-break规则 要实现韩文在网页中的特殊换行效果，最直接且常用的方法是使用CSS的word-break:keep-all;。1.word-break:keep-all;能确保韩文词语在没有空格的情况下不被拆开，避免单词被断开，提升阅读体验；2.需配合overflow-wrap:break-word;（或word-wrap:break-word;）作为兜底策略，防止超长词语溢出容器；3.区别于word-break:break-all;（允许任意字符间换行）和normal（默认行为），keep-all更适用于需保持
2025-08-24 14:58:01
685
CSS怎样实现文字浮雕效果？text-shadow立体阴影叠加 实现文字浮雕效果的核心是使用text-shadow属性通过叠加不同方向的阴影模拟光影立体感。1.凸起效果：使用右下方向的亮色阴影（如1px1px0#ffffff）和左上方向的暗色阴影（如-1px-1px0#909090），文字颜色选中性灰，背景色略浅。2.凹陷效果：与凸起相反，亮色阴影在左上（如-1px-1px0#ffffff），暗色阴影在右下（如1px1px0#707090），文字颜色略深于背景。3.调整深度：增大偏移值（如2px2px）增强立体感，减小则更微妙。4.调整方向：通过改变阴影偏移
2025-08-24 14:53:01
160
CSS怎样实现文字描边加阴影？多重text-shadow叠加 使用text-shadow可通过多层阴影叠加实现文字描边和阴影效果，1.描边通过8个方向1px偏移、无模糊的同色阴影模拟；2.阴影在描边层后添加，设置偏移、模糊和透明度；3.顺序上描边层在前、阴影层在后，但绘制层级影响较小；4.相比-webkit-text-stroke，text-shadow兼容性更好且功能更灵活，适合复杂视觉效果；5.可通过调整偏移量、颜色对比、字体选择优化描边；6.结合多层叠加还能实现长阴影、光晕、伪3D、浮雕等创意效果，最终效果以完整CSS属性值呈现并支持广泛浏览器。
2025-08-24 14:42:02
494
CSS怎样优化触摸反馈？-webkit-tap-highlight 移除默认高亮：使用-webkit-tap-highlight-color:transparent;消除不协调的默认点击效果；2.自定义点击反馈：通过:active伪类实现简单样式变化，或结合JavaScript监听touchstart和touchend事件添加动画类名以实现复杂反馈；3.优化触摸延迟：设置touch-action:manipulation减少双击缩放带来的延迟，提升响应速度；4.处理复杂交互：使用JavaScript监听touchstart、touchmove、touchend实
2025-08-24 14:35:01
969
CSS怎样制作卡片3D翻转效果？backface-visibility控制 要用CSS制作卡片3D翻转效果，核心是正确使用perspective、transform-style、backface-visibility和transition属性。1.将perspective设置在父容器上以创建3D视觉深度；2.为卡片元素设置transform-style:preserve-3d，使其子元素保持3D空间变换；3.正反面均设置backface-visibility:hidden，确保背面不可见；4.背面初始旋转180度，避免提前显示；5.通过:hover或JavaScript
2025-08-24 14:30:02
761
CSS如何实现背景图视差分层？多层background定位 要实现CSS中多层背景的视差分层效果，必须为每一层背景创建独立的HTML元素并结合CSS3D变换；1.使用独立的div作为.parallax-layer，分别设置不同背景图；2.父容器.parallax-container设置perspective和overflow-y:scroll以建立3D视角和滚动容器；3.每个层通过transform:translateZ()在Z轴上定位，负值越远则滚动越慢；4.配合scale()补偿因translateZ导致的视觉缩小，公式为scale(1+|trans
2025-08-24 14:23:01
684
CSS如何创建错位层叠布局？z-index层级控制技巧 实现错位层叠布局的关键是定位、偏移和z-index控制，1.使用position:relative或absolute进行定位；2.通过transform或margin实现偏移，推荐transform以避免影响布局；3.利用z-index设置层叠顺序，值越大越靠上，但需确保元素具有定位属性；z-index失效常见原因包括：未设置定位属性、父元素创建了新的堆叠上下文（如transform不为none、opacity小于1等）、祖先元素z-index限制、元素DOM顺序影响；排查时应检查positio
2025-08-24 14:22:01
286
CSS如何创建自适应正方形图片？padding-top百分比技巧 利用padding-top:100%创建自适应正方形图片容器，因其百分比值相对于父容器宽度计算，使高度等于宽度，形成正方形；2.父容器设width:100%、position:relative和padding-top:100%，内部图片通过position:absolute、top:0、left:0、width:100%、height:100%填充容器；3.使用object-fit:cover确保图片覆盖且不变形，或contain保持完整显示；4.该技巧可扩展至其他宽高比，如16:9视频容器设p
2025-08-24 14:20:02
635
相关专题
更多>
热门推荐
开源免费商场系统广告
热门教程
更多>
相关推荐
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网：公益在线php培训，帮助PHP学习者快速成长！
关注服务号 技术交流群
app下载
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • PHP学习

  • 技术支持

  • 返回顶部