單行居中多行居左的問題

2021-08-19 21:50:15 字數 677 閱讀 2779

開發過程中經常會遇到類似的需求,多個item從左到右邊排列,當父級div寬度不夠時折行顯示,但是當只有一行時,item居中布局

如下圖所示:

(1)一行居中顯示:

(2)多行向左對齊

之前開發思路是利用flex實現居中布局:

讓ui給乙個視覺限定,一行最多能顯示多少個,比如5個,然後在**中通過js限定死,當item個數超過5個,則讓其折行

)

}

.single-line

.multi-line

這樣雖然能達到效果,但是通過js控制始終不夠靈活,昨天看《css世界》那本書,發現還有一種方式可以實現: display: inline-block;

.container

.list

.item

TextView實現一行居中顯示,多行居左顯示

在微博上看到的一篇文章,其中有乙個技術點就是說的這個 textview實現一行居中顯示,多行居左顯示。方法如下 xml version 1.0 encoding utf 8 xmlns android xmlns tools android layout width match parent and...

TextView實現一行居中顯示,多行居左顯示

在微博上看到的一篇文章,裡面就有乙個技術點是實現這個效果的,我是以此來記錄。xml version 1.0 encoding utf 8 xmlns android xmlns tools android layout width match parent android layout height...

單行 多行文字的垂直居中

無標題文件 title head style container style body div class container h3 1.單行文字居中 h3 div style border 1px dashed red line height 60px margin 30px 這是高度為30畫素的...