CSS設(shè)置文字圖片垂直居中的方法總結(jié)
發(fā)布時間：2016-09-12 15:00:00 作者：佚名 
我要評論
我要評論這篇文章給大家演示了在不知道高度的情況下圖片如何垂直居中對齊，文中給出了實例代碼，有需要的朋友們可以參考借鑒。下面來一起看看吧。
其實很簡單，只需要在尾部增加一個<i></i> ，然后把需要垂直居中的元素設(shè)置display:inline-block; vertical-align:middle;
看看效果圖
實例代碼
復(fù)制代碼
代碼如下:<style>
*{
margin:0 ;
padding:0;
}
.bg{
background-color:#333;</p> <p> text-align:center;
}
.bg img{
vertical-align:middle;</p> <p> }
.test-list{
background-color:#999;
height:100px;
}
.test-list > span{ display:inline-block; width:210px; vertical-align:middle}
.test-list > img{ display:inline-block; vertical-align:middle}
.justify-fix{
display:inline-block;
width:250px;
border-bottom:1px solod #F00}
#p{
text-align:center}
#p span{
display:inline-block; vertical-align:middle;</p> <p>}
#p i{
display:inline-block;
height:100%;
vertical-align:middle}
</style>
</head></p> <p><body>
<p class="bg">
display: block;
<img src="<a />
</p>
<div class="test-list">
<span>文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文文</span>
<img src="<a />
</div>
<p style="text-align:justify; background-color:#666; line-height:0">
<img src="<a width="250"/>
<img src="<a width="250"http://>
<img src="<a width="250"http://>
<img src="<a width="250"http://>
<i class="justify-fix"></i>
<i class="justify-fix"></i>
<i class="justify-fix"></i>
</p>
<br/>
<p style="background-color:#666; height:200px;" id="p">
<span>第一行<br/>1313</span><i></i><span>第一行<br/>1313</span></p> <p></p>
</body>
總結(jié)
以上就是這篇文章的全部內(nèi)容了，希望對大家的學(xué)習(xí)或者工作帶來一定的幫助，如果有疑問大家可以留言交流。
相關(guān)文章
- 這篇文章主要介紹了CSS水平垂直居中的幾種方法總結(jié),垂直居中是布局中十分常見的效果之一,本文介紹了幾種方法，有興趣的可以了解一下。2016-12-19
- 這篇文章主要為大家詳細(xì)介紹了css讓容器水平垂直居中的7種方式,具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-10-17
利用CSS3的flexbox實現(xiàn)水平垂直居中與三列等高布局
這篇文章給大家介紹了三個小節(jié)的內(nèi)容，其中包括關(guān)于css3中flexbox需要掌握的概念、flexbox實現(xiàn)水平垂直居中對齊和三列等高自適應(yīng)頁腳區(qū)域黏附底部的布局，有需要的可以參考2016-09-12深入理解CSS行高line-height與文本垂直居中的原理
本文詳細(xì)介紹了CSS行高屬性line-height與文本垂直居中的原理，通過本文的介紹相信對大家以后使用line-height和設(shè)置文本垂直居中會更加熟練，有需要的可以參考借鑒。下面一2016-08-12Flexbox制作CSS布局實現(xiàn)水平垂直居中的簡單實例
下面小編就為大家?guī)硪黄狥lexbox制作CSS布局實現(xiàn)水平垂直居中的簡單實例。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-07-27CSS設(shè)置DIV垂直居中的N種方法 兼容IE瀏覽器
這篇文章主要為大家詳細(xì)介紹了兼容IE瀏覽器CSS設(shè)置DIV垂直居中的N種方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-07-05- 這篇文章主要介紹了CSS文本和div垂直居中方法總結(jié)，包括多行文本垂直居中,單行文本垂直居中,子div垂直居中，感興趣的小伙伴們可以參考一下2016-07-04
- 下面小編就為大家?guī)硪黄狢SS 實現(xiàn)垂直居中的幾種方法(必看)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-06-14
CSS在固定寬高的div內(nèi)實現(xiàn)垂直居中的實例詳解
這篇文章主要介紹了CSS在固定寬高的div內(nèi)實現(xiàn)垂直居中的實例詳解,即在div內(nèi)部元素相對于div垂直居中的方法,需要的朋友可以參考下2016-06-03- 在前端布局過程中，我們實現(xiàn)水平居中比較簡單，一般通過margin:0 auto;和父元素 text-align: center;就能實現(xiàn)。今天小編給大家?guī)砹薈SS實現(xiàn)垂直居中的幾種方法小結(jié)，感興2019-05-14