Question

我的目标是拥有一个简单的响应式CSS照片库（a）图像在每行内垂直居中（b）每行图像水平居中（c）标题在每个图像的下方水平居中

我一直在尝试以下代码：http://www.terragalleria.com/tmp/test-align.html

<!DOCTYPE HTML>
<HTML>
<head>

<style>
.centered_block {
clear: both;
display: block;
margin-left: auto;
margin-right: auto;
text-align:center;
}

.img_with_link {
padding: 0.5em;
float: left;
display: table;
width: 240px;
height: 240px;
text-align: center;
}

.img_with_link_inside {
display: table-cell;
vertical-align: middle;
}

div.img_with_link img {
display: inline;
margin: 0.5em;
}

.link_with_img {
}

</style>

</head>

<BODY>

<div class="centered_block">

<div class = "img_with_link">
<div class = "img_with_link_inside">
<img src = "http://www.terragalleria.com/images/np-pacific/olym11102.small.jpeg">
<div class = "link_with_img">
Olympic
</div>
</div>
</div>

<div class = "img_with_link">
<div class = "img_with_link_inside">
<img src = "http://www.terragalleria.com/images/np-pacific/redw1447.small.jpeg">  
<div class = "link_with_img">
Redwood
</div>
</div>
</div>

<div class = "img_with_link">
<div class = "img_with_link_inside">
<img src = "http://www.terragalleria.com/images/np-pacific/chis1466.small.jpeg">  
<div class = "link_with_img">
Channel Islands
</div>
</div>
</div>

</div>

</BODY>
</HTML>

以下是生成的浏览器窗口：

resulting browser window http://www.terragalleria.com/tmp/medium.jpg

以下是我想要的内容：

desired browser window http://www.terragalleria.com/tmp/medium-desired.jpg

请注意，这里的困难似乎是由标题引起的。我可以在没有标题的情况下得到结果（符合条件（a）和（b）），请参阅http://www.terragalleria.com/mobile/np.olympic.html

有关如何修复代码的任何想法？感谢

Answer 1

认为它很好：

.centered_block {
    clear: both;
    margin-left: auto;
    margin-right: auto;
    text-align: center; 
}

.img_with_link {
    padding: 0.5em;
    display: inline-block;
    vertical-align: top;
}

.img_with_link_inside {
    display: table-cell;
    width: 240px;
    height: 240px;
    vertical-align: middle;
}

仅在Chrome，Firefox和IE 11中测试过。 display: table-cell;用于允许vertical-align: middle，并且为了使您的块需要具有宽度的内容。（如果所有孩子都有宽度我可以计算......）另外，我添加display: inline-block;来替换float: left。

Answer 2

我希望能提供帮助，可能会在其中放置一个主要的div和图像（一个说明性示例）

<a>http://jsfiddle.net/step/k5yb8wqo/</a>

使用/标题在CSS响应式照片库中居中图像

2 个答案: