記一次text-align: center在手機瀏覽器中失效
阿新 • • 發佈：2021-01-08
技術標籤：前端
簡單示例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width"> <title>居中無效</title> <style> .footer { width: 100%; color: #a1a1a1; } .footer p { text-align: center; } </style> </head> <body> <div class="footer"> <p> ©2021 xxx.com <a href="https://beian.miit.gov.cn" target="_blank" rel="nofollow">粵ICP備88888888號</a> </p> </div> </body> </html>
該程式碼無論在電腦瀏覽器還是手機瀏覽器中正常顯示
但實際專案中該元素的同級元素裡面存在浮動的樣式，即float ，在全屏的電腦瀏覽器中居中效果沒問題，但是在手機瀏覽器檢視，這個頁面內容能自動縮放，但文字不是居中，會偏左
解決方案：
寫死width的數值，示例中為width: 100%; ，根據頁面內容寬度做了如下調整
width:1200px;
margin:0 auto;
text-align: center;
調整後再用手機瀏覽器檢視，居中正常