我的文章里有几个带有图像的div,我正在使用最大宽度/高度和溢出:隐藏来裁剪图像,这效果很好,但是它是从顶部裁剪图像,我希望它们在div中垂直居中。
.image_div {
max-height: 150px;
max-width:99%;
overflow: hidden;
margin:0px;
text-align:center;
}
.image_div img {
}
我使用最大宽度/高度以避免在图像很小的情况下出现一大块白银色。我正在寻找的 css 是可能的吗?
还应该提到CSS3解决方案也很棒,因为这是一个移动网站。
<style type="text/css">
.imgsquare {
display: table-cell;
text-align: center;
vertical-align: middle;
padding: 2px;
border: solid 1px #666;
background-color: #333;
border-radius: 4px;
}
.imgsquare * {
vertical-align: middle;
}
.imgsquare {
display: block;
}
.imgsquare span {
display: inline-block;
height: 100%;
width: 1px;
}
</style>
<!--[if lt IE 8]>
<style>
.imgsquare span {
display: inline-block;
height: 100%;
}
</style>
<![endif]-->
这将绘制一个方形div,其原点纵横比
为垂直/水平居中图像用:
<div class="imgsquare" style="width:280px; height:280px;">
<span></span>
<img style="max-width:260px; max-height:260px;" src="yourPicture.jpg" alt="No Image">
</div>
我相信
你可以像这样使用垂直对齐:
.image_div {
max-height: 150px;
max-width:99%;
overflow: hidden;
margin:0px;
text-align:center;
vertical-align:text-top;
}
您可以将"text-top"更改为许多内容,w3c 在此处列出了它们:http://www.w3schools.com/cssref/pr_pos_vertical-align.asp