CSS 居中之text"/>
CSS 居中之text
区分 text-align与margin两种对齐的方式
text-align
text-align 属性规定元素中的文本的水平对齐方式。
注意：其文本内容也包括其所有子孙元素中的文本
margin:0 auto
我们先理解一下auto，其含义因元素类型和上下文而异，在边距中，auto可以表示两种情况：占用可用空间或0 px。这两个将为元素定义不同的布局。
-
“自动”占用可用空间**
这是我们利用auto最常见的用法。通过分配auto元素的左右边距，它们可以平等地占据元素容器中的可用水平空间 - 因此元素将居中。
但是，这只适用于水平边距，它不适用于浮动和内联元素，并且它本身也不能用于绝对和固定定位元素。
-
“auto”为0px
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>
效果图：
更多推荐
CSS 居中之text
发布评论