Exception handling - text font is not centered and displayed

WeChat applet exchange (QQ group: 769977169 )

In the text component, the alignment of text-align is clearly set to center , but it has no effect.

Later, after inspection, it was found that because the text component is an inline component in the view , and the characters in the text component are of indeterminate length, the center alignment of text-align cannot be processed. You only need to set the alignment in the view in the block. Fix center alignment issue.

preprocessing style code

.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;
}

Post-processing style code

.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;
}