Home/ Questions/Q 5935777
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-22T15:18:12+00:00

Is there any way to vertical align the photos in this case with CSS?

  • 0

Is there any way to vertical align the photos in this case with CSS?
I tried add vertical-align, but it doesn’t work with div.

enter image description here

<html>
<head>

<style type="text/css">
.imageWrapper {
    margin: 1em;
    float: left;
/* vertical-align: middle; */   
}

.imageTitle {
    text-align: center;
}

.row {
    float: left;
}

#albumList {
    width: 600px;
}
</style>

</head>
<body>
<div id="albumList">

    <div class="row">
        <div id="w1" class="imageWrapper">
            <img src="1.jpg" width="150px"/>
            <div class="imageTitle">Title1</div>
        </div>

        <div id="w2" class="imageWrapper">
            <img src="2.jpg" width="150px"//>
            <div class="imageTitle">Title1</div>
        </div>

        <div id="w3" class="imageWrapper">
            <img src="3.jpg" width="150px"//>
            <div class="imageTitle">Title3</div>
        </div>
    </div>

    <div class="row">
        <div id="w4" class="imageWrapper">
            <img src="4.jpg" width="150px"/>
            <div class="imageTitle">Title1</div>
        </div>

        <div id="w5" class="imageWrapper">
            <img src="5.jpg" width="150px"//>
            <div class="imageTitle">Title1</div>
        </div>
    </div>

</div>
</body>
</html>

[THIS IS WHAT I TRIED]
I can do it with JQuery but some photos added on the fly and some added on error handler (image_not_available.jpg), so this approach too hard to apply.

var maxHeight = 0;
var maxID = 'nothing';
$('.imageWrapper').each(function(i){
    var height = $(this).height();
    if(height > maxHeight) {
        maxHeight = height
        maxID = $(this).attr('id');
    }
});

$('.imageWrapper').each(function(i){
    var id = $(this).attr('id');
    if(id != maxID) {
        var minus = maxHeight - $(this).height();
        $(this).css('margin-top', minus / 2);
    }
});
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team
    #albumList {
  display: table;
}

.imageWrapper {
  display: table-cell;
  vertical-align: middle;
  height: 350px; /* for example, guess you have to specify it */
}
    • 0