"Notes" method for vertically centering elements in the UC browser and in the mobile browser

There are many ways to get the vertical center of CSS, but the UC browser is really a mobile browser in the clear stream of mudslides!!

Recently in the MU Class network learning Vue webApp, one of which is to let the text inside the element and the icon vertically centered

There is no difference between the chrome on the computer and the default browser of the mobile browser, except that the UC browser opens with a little bit of bias, so it's uncomfortable to match the properties of the vertical-align. Finally found a way

Look at the code first

<!--pop-up layer display button -      <Divv-if= "Seller.data.supports"class= "Seller-support-num-btn">        <spanclass= "Support-count">{{Seller.data.supports.length}}</span>        <Iclass= "Icon-keyboard_arrow_right"></I>      </Div>

. seller-support-num-btn. Support-count {    vertical-align: Super;     font-size: 10px;} . seller-support-num-btn. Icon-keyboard_arrow_right {    vertical-align: top;     margin-left: 2px;     line-height: 24px;     font-size: 10px;}

Key code on the text and icon elements of the vertical-align set the text to super and the icon is set to top on it.

As for the principle, wait for my research and research to add ...

"Notes" method for vertically centering elements in the UC browser and in the mobile browser