欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

多图大小不一垂直居中

程序员文章站 2024-01-19 14:46:40
...
Method 1: Insert a transparent GIF image, which width and height are fixed.

CSS file
---------
.inner{
float: left;
}
img{
height: 100%;
background-repeat: no-repeat;
background-position: center;
}


HTML file
----------

<div>
<div class="inner">
<img src="thumbnail.gif" style="background-image:url(1.png);" />
</div>
<div class="inner">
<img src="thumbnail.gif" style="background-image:url(2.png);" />
</div>
</div>


Method 2: Insert a transparent GIF file, which width is 1 px.

CSS file
----------
.inner{
float:left;
border:1px solid #beceeb;
text-align:center;
}
.gif{
height:100%;
width:1px;
vertical-align:middle;
}
.show{
vertical-align:middle;
}


HTML file
----------

<div>
<div class="inner">
<img class="show" src="1.png" />
<img class="gif" src="1px.gif" alt="">
</div>
<div class="inner">
<img class="show" src="2.png" />
<img class="gif" src="1px.gif" alt="">
</div>
</div>