Question

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

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

我的网站

Answer 1

将 line-height 与DIV的height相同。写得像这样：

    .photospace .slideshow a.advance-link {
        line-height: 549px;
        width: 530px;
    }
.photospace .slideshow img{
 vertical-align:middle;
}

Answer 2

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

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

.photospace .gal_content{
    display:table-cell;
    vertical-align:middle;
    float: right;
    width: 530px;
    height: 549px;
}

Answer 3

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

或者，如果您没有分阶段查看旧浏览器，请查看名为Flexbox的新Webkit CSS3属性。

以下是使用Flexbox自动对齐的图像：http://jsfiddle.net/7rFEn/embedded/result/

无法居中图像（css）

3 个答案: