安卓上文字垂直居中解決方案
阿新 • • 發佈：2018-11-03
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> <title>index</title> <style> *{margin:0;padding:0;-webkit-appearance: none;} button { background-color: #fff; border: 0; outline: 0; } .button { margin: 20px; height: 32px; border-radius: 25px; padding: 0 15px; font-size: 14px; background-image: linear-gradient(-224deg, #D09445 0%, #FFDBA6 100%); color: #fff; } .buttonGroup { margin: 20px; background-image: linear-gradient(-224deg, #D09445 0%, #FFDBA6 100%); color: #fff; height: 32px; border-radius: 25px; text-align: center; white-space: nowrap; width:84px; text-align: center; display: flex; align-items: center; justify-content: center; } .buttonGroup span { font-size: 28px; transform: scale(0.5); margin: 40px; } </style> </head> <body> <p> 使用button標籤</p> <button type="button" class="button">立即支付</button> <p> 父元素使用flex佈局，子元素縮放50%</p> <div class="buttonGroup"> <span>立即支付</span> </div> </body> </html>
程式碼在QQ中預覽的效果如下所示，可以看到使用button實現的按鈕感覺文字略偏上，使用flex佈局實現的按鈕，視覺上基本是垂直居中的：
參考原文連結： https://blog.csdn.net/u014085502/article/details/80391259