文字对齐之text-align总结

一、文字对齐总结：

下面是我实际运用中遇到的问题总结：

 

css代码：

 

 

效果（段落文字没有对齐）：

 

去掉html中的<p>标签，css样式同样去掉p标签，效果如下（达到预期效果）：

 

为什么在div中加<p>标签再给p设置样式段落的最后一行会不对齐？

仔细一看写的样式发现了问题所在：

我之前用这样的后代选择器定义了样式，它会让在祖先容器introduce中的所有p的文本内容居中，而text-align定义为center，文本的最后一行不会居中，所以我的段落最后一行不会居中。

之所以#instroduce p选择器设置的text-align样式的优先级会大于.content p设置的text-align样式的优先级，是因为#instroduce p选择器的权重比.content p选择器大，现在我只想让第一p标签的文本采用text-align：center居中，只需要将选择器改成子选择器即可：

这样段落文本就可以对齐了，遇到这样的问题，就会发现还是很有必要把css的权重计算问题弄透彻。

 

上面的.content p的样式还可以再优化：

不需要设置text-align:justify段落也可以对齐，因为内容会自动填满整个容器（我是这样理解的），必要的情况下可以选择用text-align:justify来给文本设置两端对齐。

关于文字对齐text-align：

值的含义：

 

 

目前在谷歌浏览器和火狐浏览器上测的，必须要设置两端对齐的时候，只需要将text-align设为justify就可以实现文字两端对齐。

 

转载于:https://www.cnblogs.com/yy95/p/5708344.html