WeChat小程序交流(QQ群:769977169)
text组件中明明设置了text-align的对齐方式为center,但却没有效果。
后来经过检查发现,因为text组件是在view中的行内组件,且text组件中的字符是不定长度的,所以无法处理text-align的center对齐方式,只需要设置块内view中的对齐方式就可以解决居中对齐问题。
处理前样式代码
.topUIStyle{ width: 20%; height: 100%; position: relative; }
.topUIStyle .titleStyle{ width: 100%; height: 50px; line-height: 50px; font-size: 14px; color: gray; text-align: center; } .topUIStyle .titleSelectedStyle{ width: 100%; height: 50px; line-height: 50px; font-size: 16px; color: red; text-align: center; }
处理后样式代码
.topUIStyle{ width: 20%; height: 100%; text-align: center; position: relative; }
.topUIStyle .titleStyle{ width: 100%; height: 50px; line-height: 50px; font-size: 14px; color: gray; } .topUIStyle .titleSelectedStyle{ width: 100%; height: 50px; line-height: 50px; font-size: 16px; color: red; }