异常处理——text字体未居中对齐显示

WeChat小程序交流(QQ群:769977169

text组件中明明设置了text-align的对齐方式为center,但却没有效果。


后来经过检查发现,因为text组件是在view中的行内组件,且text组件中的字符是不定长度的,所以无法处理text-aligncenter对齐方式,只需要设置块内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;
}


猜你喜欢

转载自blog.csdn.net/potato512/article/details/80078629