解決 flex align-items:center 無法居中(微信小程序)


因為最近再做小程序,需要用到flex布局,因為寫慣了web項目,初次學習確實感彈性布局的強大(關鍵是不用再管可惡的ie了)。

但是也遇到了align-items:center無法居中的問題,想了很久終於找到了解決辦法。

解決方法:

  1.確定好自己的主軸方向是不是row,如果是column,那么恭喜你,align-items:center是不起效果的,這時候你可以試試justify-content:center,是不是居中了呢?(ps:這個問題我花了半天時間才弄明白,之前一直以為align-items只是控制上下居中的,沒有注意主軸的方向)

  2.在帶有數字的view或者text標簽中不能上下居中,布局如下:

  情況1:都是中文的情況下,給view加上align-items:center 其實是能居中的。

  

<view>
    <text> 內容一 </text>
    <text> 內容二 </text>
    <text> 內容三 </text>
</view>

  情況2: 只要帶有數字的情況下,view加上align-items:center部分手機上看着是不居中的(我的手機看着不是垂直居中的,別人的手機看着是垂直居中的,可能是我手機太差了,求老鐵支援支援,沒毛病!)

<view>
    <text> 內容22 </text>
    <text> 我是對不齊的 555   </text>
    <text> 內容三 </text>
</view>

  這時候可能顯示就不正常的,帶數字的可能會偏上一點,解決的辦法我找到了兩個:

  1.,如果這個只是展示一部分信息,控制在一行之內顯示,那么可以給這個view設置高度行高,這樣他們就能垂直居中顯示了。

  2.   如果需要顯示不止一行的話,那就只能把他們都放在同一個text或者view里面,這樣他們也能垂直居中顯示。這樣的缺點就是不好通過css控制每個內容之間的距離。結構如下:

<view>
    <text> 內容22 我是對不齊的 555    內容三 </text>
</view>

 

 

  (ps:應該還有很多方法解決,初學flex的我就實踐出這兩種方法啦,希望能幫助到一些踩坑的童鞋)

 

  


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM