text-align简单理解

         text-align:通常情况下，我们只是用来设置文本的对齐方式。但有的时候，我们也可以使用该属性进行元素的对其，以及进行布局。

一：基本概念

       1：W3C标准中，对text-align这样说明：它是一个基本的属性，它会影响一个元素中的文本行相互之间的对其方式。

       2：基本取值：

                left,right,center,这三个取值，想当直接，就是居左，居右，据中。其中，在不设置text-align属性时，浏览器默认是居左的。

                justify,两端自适应对其。这个时候，会根据父元素的宽度，进行自适应的两端对其。
                inherit，规定应该从父元素继承text-align属性的值。
               虽然说，在不设置text-align的情况下，浏览器是默认居左的，但是其前提是，它的祖辈元素，也没有设置text-align属性，如果祖辈设置了，那么目标元素的text-align是继承它父元素的text-align属性的。

二：实际中text-align属性的使用

        text-align属性用来设置文本的对齐方式，虽然W3C中是这么说，但是对于行内元素，也是起作用的，下面就主要叙述一下对于哪些元素会起到对齐的方式。

        

       1：首先说明，大家都知道， 元素的表现形式主要可以分为：块级元素，和行内元素。 text-align属性的设置，对于块级元素是无效的，但是对于行内元素是可以起作用的。所以，一个元素的显示对齐方式，就可以由两个因素决定，父元素的text-align属性，和自身的display属性。

注：text-align属性，只对子元素起作用，并且可以被子元素继承。display属性，只对本身起作用，并且不可被子元素继承。

         下面就直接上例子吧，证明上面的理论。

#main{
	border:1px solid #aaa;
	width:960px;
	height:200px;
	margin:0 auto;
	background-color:#eee;
	text-align:center;
}
#exp{
	display:block;
	border:1px solid #aaa;
	width:200px;
	height:100px;
	margin-top:10px;
	background-color:yellow;
}

<div id = "main">
	<div id = "exp">看我看我看我！</div>
</div>

首先，我们先设置父元素的text-align属性，为了方便起见，就一直以text-align:center吧。然后，首先是，设置id=exp的div的display分别为，block，inline-block，table-cell，inline，其显示如对应的下图所示：

当然，display的取值还有很多，如果你有兴趣，可以一一进行测试，在这里，就对这四个展示了，从图中，我们可以看出，行内元素都实现了居中，而块级元素，都没有居中。

注：IE7-的浏览器不考虑在内，因为IE7-的浏览器，会使得所有的子元素都居中的，我们可以利用这个性质，弥补margin:0 auto在IE7-的浏览器不能居中的问题。可以查看另一篇文章提到过的实现居中的方法：margin的问题。

当然，这里只是为了说明这个情况，具体的时候，就看你使用的什么元素了。你如果使用的是行内元素，比如，span,input,img,a等，不需要再设置display就可以做到居中了。(一般网站的最后的友情链接什么的，都是使用行内元素和text-align布局的，可以去看看哦。)

2：text-align使用justify进行两边对齐
        相同的道理，在这里也是需要把元素改成行内元素才可以使用的，当然，文本方面，就不需要多说了，文本肯定没有问题的。我们经常可以看到，图片展示的网页，这样的网页，最好的效果，当然是，可以是两端对齐的了。

       关于使用text-align:justify的更详细的问题，这里不再叙述，如有兴趣，请点击查看： display:inline-block/text-align:justify下列表的两端对齐布局，文章写得很好。

该篇文章的想法，来自于CSDN帖子：为什么在火狐可以水平垂直居中，Chrome中就不行？

OK了，这里关于text-align的，大概就是这样子了，如果有问题，欢迎交流。如果发现文中有地方描述有错误，请指正，谢谢！