css中怎么實(shí)現(xiàn)移動(dòng)端圖片文字水平居中，相信很多沒有經(jīng)驗(yàn)的人對(duì)此束手無(wú)策，為此本文總結(jié)了問(wèn)題出現(xiàn)的原因和解決方法，通過(guò)這篇文章希望你能解決這個(gè)問(wèn)題。
創(chuàng)新互聯(lián)公司是一家集網(wǎng)站建設(shè),建鄴企業(yè)網(wǎng)站建設(shè),建鄴品牌網(wǎng)站建設(shè),網(wǎng)站定制,建鄴網(wǎng)站建設(shè)報(bào)價(jià),網(wǎng)絡(luò)營(yíng)銷,網(wǎng)絡(luò)優(yōu)化,建鄴網(wǎng)站推廣為一體的創(chuàng)新建站企業(yè)，幫助傳統(tǒng)企業(yè)提升企業(yè)形象加強(qiáng)企業(yè)競(jìng)爭(zhēng)力。可充分滿足這一群體相比中小企業(yè)更為豐富、高端、多元的互聯(lián)網(wǎng)需求。同時(shí)我們時(shí)刻保持專業(yè)、時(shí)尚、前沿，時(shí)刻以成就客戶成長(zhǎng)自我，堅(jiān)持不斷學(xué)習(xí)、思考、沉淀、凈化自己，讓我們?yōu)楦嗟钠髽I(yè)打造出實(shí)用型網(wǎng)站。
solution 1：利用行內(nèi)元素的padding-left屬性。把圖片絕對(duì)定位到padding-left區(qū)域內(nèi)，然后對(duì)外層div元素設(shè)置文字居中，對(duì)span元素設(shè)置line-height，讓文字垂直居中
Username
CSS Code復(fù)制內(nèi)容到剪貼板
.container {
height: 10rem;
text-align: center;
background: #819121;
}
.wrap {
display: inline-block;
position: relative;
margin-top: 3rem;
padding-left: 3rem;
line-height: 2rem;
background: #BB9391;
}
.icon {
position: absolute;
left: 0;
top: 0;
height: 2rem;
}
效果圖：
.jpg)
solution 2：box布局居中，對(duì)div元素設(shè)置box-pack，span元素設(shè)置display: block，由于想偷懶，省略兼容模式寫法
/div>
CSS Code復(fù)制內(nèi)容到剪貼板
.container {
display: -webkit-box;
-webkit-box-pack: center;
height: 10rem;
background: #B2B2CD;
}
.icon {
margin-top: 2rem;
height: 2rem;
}
.username {
display: block;
margin-top: 2rem;
padding-left: 1rem;
line-height: 2rem;
}
效果圖：
看完上述內(nèi)容，你們掌握css中怎么實(shí)現(xiàn)移動(dòng)端圖片文字水平居中的方法了嗎？如果還想學(xué)到更多技能或想了解更多相關(guān)內(nèi)容，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝各位的閱讀！
重慶分公司
重慶分公司
