CSS 居中之text-align与margin的区别
区分 text-align与margin两种对齐的方式text-aligntext-align 属性规定元素中的文本的水平对齐方式。注意：其文本内容也包括其所有子孙元素中的文本margin:0 auto我们先理解一下auto，其含义因元素类型和上下文而异，在边距中，auto可以表示两种情况：占用可用空间或0 px。这两个将为元素定义不同的布局。“自动”占用可用空间**这是我们利用auto最常见的用
区分 text-align与margin两种对齐的方式
text-align
text-align 属性规定元素中的文本的水平对齐方式。
注意：其文本内容也包括其所有子孙元素中的文本
margin:0 auto
我们先理解一下auto，其含义因元素类型和上下文而异，在边距中，auto可以表示两种情况：占用可用空间或0 px。这两个将为元素定义不同的布局。
这是我们利用auto最常见的用法。通过分配auto元素的左右边距，它们可以平等地占据元素容器中的可用水平空间 - 因此元素将居中。
但是，这只适用于水平边距，它不适用于浮动和内联元素，并且它本身也不能用于绝对和固定定位元素。
auto在浮动，内联和绝对元素中不起作用。所有这些元素已经决定了它们的布局，所以没有auto用于边距并期望它像这样集中。
这将破坏使用类似float的最初目的。因此设置这些元素的auto值为0px。
auto如果它没有宽度，也不会对典型的块元素起作用
另外如果我们写成margin:auto，此时设置垂直方向上也是auto，但结果同margin:0 auto;其使用只也为0,但是一般为了相同，显然设置垂直方向上aoto的时候其值为0
text-algin是设置文本内容的对齐方式，且对子孙元素中的文本也有效
margin：0 auto;是设置元素的对齐方式，但对子孙元素无效
实例
<!DOCTYPE html>
<html>
<head>
<title>测试居中操作</title>
<style type="text/css">
.box {
width: 100%;
height: 200px;
background-color: yellow;
text-align: center;
}
.box div {
width: 20%;
height: 50%;
background-color: tomato;
}
.box span {
background-color: springgreen;
}
.box div div {
width: 60%;
background-color: white;
}
</style>
</head>
<body>
<div class="box">
我是box的内容
<div>
我是子div中的内容
<div>我是box的div中的内容</div>
</div>
<span>我是span中的内容</span>
</div>
</body>
</html>
效果图：
权威｜前沿｜技术｜干货｜国内首个API全生命周期开发者社区
更多推荐
3
0- 0
已为社区贡献1条内容
所有评论(0)