CODEWITHSUNDEEP
htmlcss
Quang-Tuan Luong
Quang-Tuan Luong

Reputation: 57

Centering images in CSS responsive photo gallery w/caption

My goal is to have a simple responsive CSS photo gallery where (a) images are centered vertically within each row (b) each row of images is centered horizontally (c) the caption is centered horizontally below each image

I've been trying the following code: 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>

Here is the resulting browser window:

resulting browser window
(source: terragalleria.com)

Here is what I am trying to get:

desired browser window
(source: terragalleria.com)

Note that the difficulty here seems to be caused by the caption. I am able to get that result (meeting criteria (a) and (b)) without the caption, see http://www.terragalleria.com/mobile/np.olympic.html

Any ideas on how to fix the code ? Thank

Upvotes: 1

Views: 242

Answers (2)

fdglefevre
fdglefevre

Reputation: 692

Think it's good like that:

.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;
}

Only tested in Chrome, Firefox and IE 11. display: table-cell; is used to allow vertical-align: middle and in order to center something your block need to have a width. (which can be calculated if all children have a width I think...) Also, I add display: inline-block; to replace the float: left.

Upvotes: 2

step
step

Reputation: 186

i hope to help, might put a main div and images within this(an illustrative example)

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

Upvotes: 0

Related Questions