css————关于margin:0px auto的几个居中问题

时间 2021-01-05

标签 css html 浏览器 spa code xml htm blog utf-8 栏目 CSS 繁體版

原文原文链接

前言

margin:0px auto;适用于指定了固定宽度的div与其它元素，好比p,img等，使用 margin:0px auto，居中是你们在作css div定位时的最经常使用方法，可是据我本身的使用过程来看，常有居中不了的状况。css

与 margin:100px 混用，致使没法居中

　　这种状况下，由于前面设了margin:0px auto; 可是后面又设了margin:100px，这明显是相矛盾的，不只如此，若是同时使用了margin:0px auto ; 和 float:left ，也同样都不生效。html

没有指定DOCTYPE

　　DOCTYPE是指定浏览器以哪种标准解析html代码，若是不指定，极有可能会不生效。浏览器

　　咱们常见有人写html，是直接以<html>开头的，这种状况，咱们只要再加上DOCTYPE头便可以，最好是直接从dw中新建一个html头，而后从中再作修改。完整的html头以下:ui

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<body>
主题内容
</body>
</html>

DOCTYPE前还有代码，致使不生效

我试了一下，只要在<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">这一句前加了一个这样的注释，也一样出现了margin:0px auto;没法居中的状况。spa

使用text-align:center

　　这是下下之策，若是上面margin:0px auto;用了怎么都不行，那到body中加上text-align:center;吧，如此一下不只是div,文字也会居中显示。　　
　　而后能够再到细化的css中，把相应容器再设成text-align:left再达到文字靠左的效果。code

　　使用 text-align:center; 居中时不能添加 doctype 声明，不然将不生效　　xml

　　还有就是 margin:0 auto; 和 margin-left:auto; margin-right:auto;的现实效果有时还不同，其原意可能在于设置了margin-top的高度不为0时，会出现意想不到的效果。htm