多图大小不一垂直居中
程序员文章站
2024-01-19 14:46:40
...
Method 1: Insert a transparent GIF image, which width and height are fixed.
CSS file
---------
HTML file
----------
Method 2: Insert a transparent GIF file, which width is 1 px.
CSS file
----------
HTML file
----------
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>