无法居中图像（css）

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

我有一个幻灯片与各种图像大小，但不超过530通过549对于较小的图像，我怎么输入它们？我想做什么的照片。我可以添加边距/填充，但强制屏幕下方已经是530x549的图像。无法居中图像（css）

我的网站

来源

2012-06-06 user1421414

在我看来，他们是完全正确一起工作... –

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

我可以看到你正在给.gal_contentdisplay:block使用jQuery，所以你需要将其更改为table-cell

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

来源

2012-06-06 12:37:35 N1ck

你们都很棒！ – user1421414

@ user1421414如果我设法帮助，您可以通过正式[接受]（http://meta.stackexchange.com/questions/5234/how-does-accepting-an-answer-work）答复答案。这是一个既定的（也是很好的），在这里感谢SO。 :) – N1ck

如果你的意思是你想它垂直对齐的中心，这是不可能的（在所有浏览器至少）与DIVS和CSS纯粹。您将需要使用Javascript来正确定位它。

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

这里是在800x800px箱和经销商使用Flexbox的一致抛出的形象的例子：http://jsfiddle.net/7rFEn/embedded/result/

来源

2012-06-06 12:30:04 BePatient

“如果你的意思是你想它垂直对齐的中心，这是不可能的（在所有浏览器至少） DIVS和CSS“。 Ahhmmmm什么？请解释。 – Cthulhu

我的意思是使用CSS，你不能将div内的任何内容与垂直中心对齐，为此，你需要使用表_这真的不应该用于this_或使用Javascript。 – BePatient

给的line-height相同DIV的height。像这样写：

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

来源

2012-06-06 12:38:02 sandeep

这只适用于如果你知道100％图像的高度是多少。例如，如果使用高度为510px的图像，它将不起作用。 – BePatient

@BePatient看到OP图像，因为他定义了div的高度是固定的。 – sandeep

你们都很棒！ – user1421414

无法居中图像（css）

回答

相关问题