text-align的作用问题

之前一直无脑的使用text-align这个属性没出现什么问题，今天在写代码的时候发现这个属性还是有点学问的，主要来讲是需要加给想要居中的元素的父级元素，而非该元素本身。

先看下W3C上该属性的定义：

text-align 属性规定元素中的文本的水平对齐方式。

该属性通过指定行框与哪个点对齐，从而设置块级元素内文本的水平对齐方式。通过允许用户代理调整行内容中字母和字之间的间隔

即，我们给某个元素加上text-align属性，是定义它内部文本或者元素的对齐方式，所以在块级元素内如果只有文本，那么该文本会自动对齐，如果块级元素内还有其他的inline元素，那么该inline元素也会自动对齐！

如下，我想让下载客户端上面的星星居中，给img标签text-align：center是没有作用的，

<a href="#">
	<img src="images/icon_quick_vip.png" width="22px;">
	<p>下载客户端</p>
</a>
	<img src="images/icon_quick_vip.png" width="22px;">
	<p>下载客户端</p>
</a>

.side-function img{
	text-align: center;
}

改成这样之后，就好了

 

.side-function a{
	text-align: center;
}