名站导航为爱好css的朋友们提供相关的知识。
css教程 div设置margin:0 auto不能水平居中
- 此篇文章具体介绍如下
div盒子居中
div居中是对框架盒子本身设置。让网页主体水平居中于浏览器中,就需设置margin:0 auto实现布局居中。
CSS教程 内容居中
和DIV盒子居中有着同样居中字眼的内容居中,则是对盒子里内容(文字、图片等内容)实现水平居中。使用text-align:center即可实现hTML元素里的内容居中。不管是对div标签、h1标签、h2标签、p标签等html元素标签设置都能让其对于盒子里内容水平居中。
实例:
<!DOCTYPE html>
<html>
<head>
<title>css教程 html元素居中与html元素内容居中的区别</title>
</head>
<body>
<div style="margin:0 auto; width:300px">码农教程</div><!--这里是DIV盒子相对于父级居中,盒子里面的内容并没有居中-->
<div style="text-align:center;width:300px;">码农教程</div><!--这样是div盒子里面的内容相对于盒子本身居中-->
</body>
</html>
在线测试
- html元素居中:对框架设置水平居中(比如对DIV本身设置DIV水平居中于浏览器中)。
- html内容居中:对盒子里的内容设置水平居中(比如DIV内放到图片、文字等内容)
关于css的相关的知识就说到这里希望能够可以帮助更多的朋友们。,css,div,居中css教程 实现div宽度随内容自适应