亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

CSS設(shè)置文字圖片垂直居中的方法總結(jié)

  發(fā)布時間：2016-09-12 15:00:00   作者：佚名   我要評論
這篇文章給大家演示了在不知道高度的情況下圖片如何垂直居中對齊，文中給出了實(shí)例代碼，有需要的朋友們可以參考借鑒。下面來一起看看吧。

其實(shí)很簡單，只需要在尾部增加一個<i></i> ，然后把需要垂直居中的元素設(shè)置display:inline-block; vertical-align:middle;

看看效果圖

實(shí)例代碼

復(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)文章

最新評論