最近做小程序，需要用到flex布局，發現垂直居中是用：vertical-align:middle或者line-height

后來發現這2個都不能完全實現圖片與文字居中，這可怎么辦？

大圖片

我給start_k這個class加了vertical-align:middle，不行，后來又用line-height，還是不行

.start_k{

display:flex;

padding-left:5px;

text-align: center;

vertical-align:middle

}

image.png

沒有圖片和文字還沒居中對齊，最后改為align-items:center，就居中對齊了

.start_k{

display:flex;

padding-left:5px;

text-align: center;

align-items:center;

}

image.png

最后查看了一下align-items：center;的屬性

居中對齊彈性盒的各項元素：

view { display：flex ;

align-items：center;

}

image.png

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

解決方法可以查看博客那篇文章

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

總結

以上是生活随笔為你收集整理的uni微信小程序 下载图片跟文字_微信小程序：图片与文字无法居中 最后解决的方法是——...的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。