margin: 0 auto; 元素水平居中布局无效

最新推荐文章于 2024-04-26 14:35:29 发布

启程mmm

最新推荐文章于 2024-04-26 14:35:29 发布

阅读量1.3k

点赞数 1

文章标签： web前端

失效原因：

1、没有设置宽度

<div style="margin:0 auto;"></div>
看看上面的代码，根本没有设置DIV的宽度，如何根据宽度自适应呢？新手比较容易忽略的问题！

2、没声明DOCTYPE

①DOCTYPE是document type（文档类型）的简写，在web设计中用来说明你用的XHTML或者HTML是什么版本。要建立符合标准的网页，DOCTYPE声明是必不可少的关键组成部分！

②看看下面的代码，是不是很熟悉？像这样的，在文档最顶端，所有代码之上的乱七八糟的东西，就是用来声明DOCTYPE的！
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

③你有三种选择，用来声明DOCTYPE
* 过渡的(Transitional)：要求非常宽松的DTD，它允许你继续使用HTML4.01的标识(但是要符合xhtml的写法)，完整代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

* 严格的(Strict)：要求严格的DTD，你不能使用任何表现层的标识和属性，例如<br>，完整代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

* 框架的(Frameset)：专门针对框架页面设计使用的DTD，如果你的页面中包含有框架，需要采用这种DTD，完整代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

④至于选择哪种。。使用过度的就可以了。。

说了半天，margin:0 atuo;不起作用，不能居中的话，看看你的文档最顶端有没有声明DOCTYPE，没有就复制粘贴一下，就可以了！

--------------------- 本文来自 chenweilong20 的CSDN 博客，全文地址请点击：https://blog.csdn.net/chenweilong20/article/details/54140237?utm_source=copy

margin：auto可以做到水平居中，前提条件就是，这个标签是块状元素，并且有个确定的宽度，百分比的宽度也行；padding的话, 设置成auto它会自动继承浏览器的padding值，当设置padding值为auto时，所有padding值都会变为0，因此一般都会以具体数值或者其他方法实现效果。

ps：一般来说，浏览器是没有预设padding值的，但也有个别浏览器是默认有padding值的，为了避免这个对样式造成影响，我们样式开头一般会加上一句*{margin:0;padding:0}

--------------------- 本文来自别开车营养跟不上的CSDN 博客，全文地址请点击：https://blog.csdn.net/u014035151/article/details/52005800?utm_source=copy

启程mmm

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
margin: 0 auto; 元素水平居中布局无效

失效原因：1、没有设置宽度&lt;div style="margin:0 auto;"&gt;&lt;/div&gt;看看上面的代码，根本没有设置DIV的宽度，如何根据宽度自适应呢？新手比较容易忽略的问题！2、没声明DOCTYPE①DOCTYPE是document type（文档类型）的简写，在web设计中用来说明你用的XHTML或者HTML是什么版本。要建立符合标准的网页，...
复制链接

扫一扫