html怎么實現文字圖片垂直居中

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

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

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

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

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

　　包含塊（ContainingBlock）

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

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

　　初始包含塊

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

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

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

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

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

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

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

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

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

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

　　css圖片水平居中

　　1.利用margin:0auto實現圖片水平居中

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

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

　　<imgalt=""src="https://www.baidu.com/img/baidu_jgylogo3.gif"style="margin:0auto;"/></div>

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

　　代碼如下:

　　<divstyle="text-align:center;width:500px;border:greensolid1px;"><imgalt=""src="https://www.baidu.com/img/baidu_jgylogo3.gif"style="display:inline-block;"/></div>

　　css圖片垂直居中

　　1.利用高==行高實現圖片垂直居中

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

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

　　<imgalt=""src="https://www.baidu.com/img/baidu_jgylogo3.gif"style="display:inline-block;vertical-align:middle;"/></div>

　　2.利用table實現圖片垂直居中

　　利用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="https://www.baidu.com/img/baidu_jgylogo3.gif"style="display:inline-block;"/>

　　</span></div>

　　3.利用絕對定位實現圖片垂直居中

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

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

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

　　4.移動端可以利用flex布局實現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="https://www.baidu.com/img/baidu_jgylogo3.gif"style=""/>

　　</div></div>

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