新聞中心
今天就跟大家聊聊有關(guān)bootstrap響應(yīng)式布局中怎么設(shè)置圖片居中,可能很多人都不太了解,為了讓大家更加了解,小編給大家總結(jié)了以下內(nèi)容,希望大家根據(jù)這篇文章可以有所收獲。
Bootstrap框架來(lái)制作響應(yīng)式網(wǎng)站(或稱之為響應(yīng)式網(wǎng)頁(yè)排版)真的很方便,特別是對(duì)于圖片,用一個(gè)css類.img-responsive就可以實(shí)現(xiàn)響應(yīng)(自動(dòng)隨屏幕縮放,姑且這樣理解),一行代碼就實(shí)行了,如同使用html標(biāo)簽一樣,不需要考慮邏輯。
如下:
class=”img-responsive”
響應(yīng)式圖片如何居中?
圖片居中在網(wǎng)頁(yè)制作中是常常會(huì)用到的,那響應(yīng)式圖片要如何居中呢?也很簡(jiǎn)單,用一個(gè)css類.center-block就行了。代碼如下:
class=”img-responsive center-block”
這一行代碼讓圖片響應(yīng)且居中。so easy!
但是問(wèn)題也會(huì)來(lái)了!
1.那Bootstrap常用的.text-center類行不行(能不能讓響應(yīng)式圖片居中)呢?
答案是:通常情況下,.text-center類用于文字居中,對(duì)于非響應(yīng)式圖片,會(huì)起作用,而對(duì)于響應(yīng)式圖片,則不起作用。
2.那.center-block 類換一個(gè)位置,會(huì)不會(huì)影響響應(yīng)式圖片的居中呢?
答案是:會(huì)的。
看完上述內(nèi)容,你們對(duì)bootstrap響應(yīng)式布局中怎么設(shè)置圖片居中有進(jìn)一步的了解嗎?如果還想了解更多知識(shí)或者相關(guān)內(nèi)容,請(qǐng)關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道,感謝大家的支持。
文章標(biāo)題:bootstrap響應(yīng)式布局中怎么設(shè)置圖片居中-創(chuàng)新互聯(lián)
文章網(wǎng)址:http://www.dlmjj.cn/article/dieies.html