今天小編給大家分享一下html怎么實現(xiàn)文字圖片垂直居中的相關知識點，內容詳細，邏輯清晰，相信大部分人都還太了解這方面的知識，所以分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后有所收獲，下面我們一起來了解一下吧。

創(chuàng)新互聯(lián)從2013年開始，是專業(yè)互聯(lián)網(wǎng)技術服務公司，擁有項目成都網(wǎng)站建設、網(wǎng)站建設網(wǎng)站策劃，項目實施與項目整合能力。我們以讓每一個夢想脫穎而出為使命，1280元鞍山做網(wǎng)站,已為上家服務,為鞍山各地企業(yè)和個人服務,聯(lián)系電話:028-86922220

方法一：設置盒子高度與line-height相同，本方法適用于一行文字。

圖片垂直居中和一行文字對齊用屬性vertical-align

小圖標和文字垂直對齊，小圖標作為背景插入

//attr：設置自己生成的屬性，像selectedchecked這類即使用鼠標點過他的值是undefinded，所以自有屬性推薦用prop

包含塊（ContainingBlock）

某個元素的尺寸和位置的計算往往是由該元素所在的包含塊決定的，包含塊不會特指某個元素區(qū)域，而是一塊視覺假想出來的一塊區(qū)域，理解了他就可以方便的為元素進行定位。

那怎么知道一個元素的包含塊在哪呢？

初始包含塊

用戶代理（比如瀏覽器）選擇根元素作為containingblock（稱之為初始containingblock）。當html的子元素沒有其他跟親近的包含塊時，會依靠初始包含塊進行定位、

初始包含塊的大??？即視口大小，，高度不會隨著html的增大而增大。

非絕對定位的元素，其包含塊為最近的塊級祖先元素盒子的內容邊界組成。

浮動元素也是如此，從內容邊界開始。

絕對元素的包含塊由最近的position不是static的祖先建立

其實這個比較復雜，需要考慮該絕對元素的包含塊是內聯(lián)還是塊級元素創(chuàng)建的。內聯(lián)的情況兼容性比較差，所以一般都避免讓內聯(lián)元素里面去包含塊級元素，所以大部分還都是由塊級元素創(chuàng)建包含塊。

其containingblock由祖先的border內邊界形成。

如果元素有屬性'position:fixed'，containingblock由視口建立

css圖片居中分css圖片水平居中和垂直居中兩種情況，有時候還需要圖片同時水平垂直居中，

下面分幾種居中情況分別介紹:

css圖片水平居中

1.利用margin:0auto實現(xiàn)圖片水平居中

利用margin:0auto實現(xiàn)圖片居中就是在圖片上加上css樣式margin:0auto如下：

<divstyle="text-align:center;width:500px;border:greensolid1px;">

<imgalt=""src="/upload/otherpic63/baidu_jgylogo3.gif"style="margin:0auto;"/></div>

2.利用文本的水平居中屬性text-align:center

代碼如下:

<divstyle="text-align:center;width:500px;border:greensolid1px;"><imgalt=""src="/upload/otherpic63/baidu_jgylogo3.gif"style="display:inline-block;"/></div>

css圖片垂直居中

1.利用高==行高實現(xiàn)圖片垂直居中

這種方法是要注明高度才可以使用，代碼如下：

<divstyle="text-align:center;width:500px;height:200px;line-height:200px;border:greensolid1px;">

<imgalt=""src="/upload/otherpic63/baidu_jgylogo3.gif"style="display:inline-block;vertical-align:middle;"/></div>

2.利用table實現(xiàn)圖片垂直居中

利用table的方法是利用了table的垂直居中屬性，代碼如下：

這里使用display:table;和display:table-cell;來模擬table，這種方法并不兼容IE6/IE7，IE67不支持display:table，如果你不需要支持IE67那就可以用

缺點：當你設置了display:table;可能會改變你的原有布局

<divstyle="text-align:center;width:500px;height:200px;display:table;border:greensolid1px;"><spanstyle="display:table-cell;vertical-align:middle;">

<imgalt=""src="/upload/otherpic63/baidu_jgylogo3.gif"style="display:inline-block;"/>

</span></div>

3.利用絕對定位實現(xiàn)圖片垂直居中

如果已知圖片的寬度和高度可以這樣，代碼如下：

<divstyle="width:500px;height:200px;position:relative;border:greensolid1px;">

<imgalt=""src="/upload/otherpic63/baidu_jgylogo3.gif"style="width:120px;height:40px;position:absolute;left:50%;top:50%;margin-left:-60px;margin-top:-20px;"/></div>

4.移動端可以利用flex布局實現(xiàn)css圖片垂直居中

移動端一般瀏覽器版本都比較高，所以可以大膽的使用flex布局，（flex布局參考css3的flex布局用法）演示代碼如下：

css代碼：

<styletype="text/css">

.ui-flex{

display:-webkit-box!important;

display:-webkit-flex!important;

display:-ms-flexbox!important;

display:flex!important;

-webkit-flex-wrap:wrap;

-ms-flex-wrap:wrap;

flex-wrap:wrap

}

.ui-flex,.ui-flex*,.ui-flex:after,.ui-flex:before{

box-sizing:border-box

}

.ui-flex.justify-center{

-webkit-box-pack:center;

-webkit-justify-content:center;

-ms-flex-pack:center;

justify-content:center

}

.ui-flex.center{

-webkit-box-pack:center;

-webkit-justify-content:center;

-ms-flex-pack:center;

justify-content:center;

-webkit-box-align:center;

-webkit-align-items:center;

-ms-flex-align:center;

align-items:center

}

</style>

html代碼：

<divclass="ui-flexjustify-centercenter"style="border:greensolid1px;width:500px;height:200px;">

<divclass="cell">

<imgalt=""src="/upload/otherpic63/baidu_jgylogo3.gif"style=""/>

</div></div>

以上就是“html怎么實現(xiàn)文字圖片垂直居中”這篇文章的所有內容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會為大家更新不同的知識，如果還想學習更多的知識，請關注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

當前題目：html怎么實現(xiàn)文字圖片垂直居中
標題路徑：http://chinadenli.net/article30/jieipo.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供外貿網(wǎng)站建設、手機網(wǎng)站建設、網(wǎng)站設計公司、網(wǎng)站改版、品牌網(wǎng)站設計、企業(yè)網(wǎng)站制作

廣告

聲明：本網(wǎng)站發(fā)布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經(jīng)允許不得轉載，或轉載時需注明來源： 創(chuàng)新互聯(lián)