0 
.photospace .slideshow-container {
    position: relative;
    clear: both;
    height: 450px;

我有一个具有各种图像尺寸但不大于 530 x 549 的幻灯片。对于较小的图像，我如何输入它们？我想做什么的图片。我可以添加边距/填充，但它会强制屏幕下方已经是 530x549 的图像。

我的网站

4

3 回答 3

2

给出与 DIV相同的行高。height像这样写：

    .photospace .slideshow a.advance-link {
        line-height: 549px;
        width: 530px;
    }
.photospace .slideshow img{
 vertical-align:middle;
}
于 2012-06-06T12:38:02.290 回答
1

您可以使用display:table-cell然后vertical-align:middle.

我可以看到您目前正在.gal_content display:block使用 jQuery，因此您需要将其更改为table-cell

.photospace .gal_content{
    display:table-cell;
    vertical-align:middle;
    float: right;
    width: 530px;
    height: 549px;
}
于 2012-06-06T12:37:35.107 回答
0

如果您的意思是您希望将其垂直对齐到中心，那么仅使用 DIVS 和 CSS是不可能的（至少在所有浏览器中） 。您将需要使用 Javascript 来正确定位它。

或者，如果您不熟悉旧浏览器，请查看名为Flexbox的新 Webkit CSS3 属性。

这是一个将图像放入 800x800px 盒子并使用 Flexbox 自动对齐的示例：http: //jsfiddle.net/7rFEn/embedded/result/

于 2012-06-06T12:30:04.260 回答