margin 是什么?
- CSS 的box model中一个重要属性就是margin,是元素距离容器的距离,看图复习一下
margin:auto; 怎么用
- 可以将元素居中
- 原理是:
The element will take up the specified width, and the remaining space will be split equally between the two margins
实验出真理
- 将一个h1元素,设置为margin:auto; 看是否会居中呢?猜猜看
<!DOCTYPE html>
<html>
<head>
<style>
h1{
margin: auto;
}
</style>
</head>
<body>
<h1>Hello world!</h1>
</body>
</html>
结果是:
没有居中,这是什么鬼,说好的居中呢?我们将border显示出来看一下
机智的小伙伴可以看出来了,元素h1其实已经居中了,h1元素不是只有文字那么长,而是占了一整行,占满了当然居中了。文字存在于元素中,文字的居中是text-align的事了。
为了验证我们想法,width设置为固定长度500px。
you see, 红色的框框也就是h1元素居中了。
实验二
- 将一个span 设置margin:auto; 这次我们给它先设置了width
<!DOCTYPE html>
<html>
<head>
<style>
span{
margin: auto;
width: 500px;
}
</style>
</head>
<body>
<span>Margin testing</span>
</body>
</html>
然而,
并没有居中,而且发现这个宽度不像是500px啊
是的,width没有起作用,因为span就不是可以设置宽度的元素啊,故意挖坑是吧!这就是block 和inline元素的区别。
block 元素:通常另起一行,可以设置width和height,默认width是100%
inline元素:通常不会另起一行,元素的宽高由内容撑大,设置width无效
BUT,block 和 inline 是可以转化的,设置display:block; display: inline; 即可
所以为span加上display:block,让我的width设置生效。
果然,蓝色框框也就是我们的span元素就居中啦。
一句话总结
- 元素必须有有效的width,才可以使用margin:auto;来使元素居中
对于block元素,要设置固定大小的width, 默认width是100%看不出来居中效果
对于inline元素,先display:block; 再设置固定大小的width
PS.
- 想要文字居中用 text-align: center; 就可以啦,区分开文字在元素中居中,和元素在容器中居中哦!