小編這次要給大家分享的是微信小程序如何實現(xiàn)圖片右邊加兩行文字，文章內(nèi)容豐富，感興趣的小伙伴可以來了解一下，希望大家閱讀完這篇文章之后能夠有所收獲。
超過十多年行業(yè)經(jīng)驗，技術(shù)領(lǐng)先，服務(wù)至上的經(jīng)營模式，全靠網(wǎng)絡(luò)和口碑獲得客戶，為自己降低成本，也就是為客戶降低成本。到目前業(yè)務(wù)范圍包括了：網(wǎng)站制作、網(wǎng)站建設(shè)，成都網(wǎng)站推廣，成都網(wǎng)站優(yōu)化，整體網(wǎng)絡(luò)托管，微信小程序，微信開發(fā)，app軟件開發(fā)公司，同時也可以讓客戶的網(wǎng)站和網(wǎng)絡(luò)營銷和我們一樣獲得訂單和生意！
圖片右邊加兩行文字
先來一個效果圖：
下面來看代碼
wxml
服務(wù)項目 進入服務(wù)項目，查看項目數(shù)據(jù)
wxss代碼
重慶分公司
重慶分公司
.view_tupian_wenzi {
display: flex;
flex-direction: row;
margin-left: 10px
}
.image_1 {
width: 50px;
height: 50px;
}
.view_wenzi2 {
width: 90px;
margin-left: 5px;
display: flex;
flex-direction: column;
}
.text_small{
font-size: 27rpx;
word-break:break-all;
color: #7a7878
}ps：下面接著看下如何實現(xiàn)圖片和兩行文字在一行顯示
給你個例子- -
html
Lorem ipsum dolor sit amet consectetur adipisicing.
Lorem ipsum dolor sit amet consectetur adipisicing.
css
.wrap {
/* 可無需設(shè)置高度，靠圖片高度 或者 文字的上下padding撐開高度 */
border: 1px solid;
width: 600px;
text-align: center;
}
.wrap span{
display: inline-block;
vertical-align: middle;
padding: 20px 0; /* 撐開高度 */
}
.wrap img{
width: 10px;
height: auto;
vertical-align: middle;
}其實多行居中分很多情況的- -只有行內(nèi)元素，只有行內(nèi)替換元素，行內(nèi)與行內(nèi)替換混合，建議去好好看看vertical-align與基線相關(guān)資料。
就樓主這個需求，還有其他更容易的實現(xiàn)方式，比如：
1、flex彈性盒子（移動端）
2、使用表格布局
看完這篇關(guān)于微信小程序如何實現(xiàn)圖片右邊加兩行文字的文章，如果覺得文章內(nèi)容寫得不錯的話，可以把它分享出去給更多人看到。
