Vertical align photos on the same row
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.
<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 so开发者_JS百科me 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);
}
});
#albumList {
display: table;
}
.imageWrapper {
display: table-cell;
vertical-align: middle;
height: 350px; /* for example, guess you have to specify it */
}
could you just set the line-height the same as height of div.row
.row {
height: 200px;
line-height: 200px;
}
To use vertical align in a div you need to use the display property table-cell.
Heres an example: HTML -
<ul>
<li class="item">
<img src="http://placekitten.com/50/150" alt="Little kitten">
</li>
<li class="item">
<img src="http://placekitten.com/100/60" alt="Little kitten">
</li>
<li class="item">
<img src="http://placekitten.com/100/160" alt="Little kitten">
</li>
CSS -
.item{
width: 200px;
height: 200px;
display: table-cell;
vertical-align: middle;
}
Hopefully that's what you're looking for.
vertical-align only applies to inline elements (or elements inside a table cell), so use display: inline-block instead of float: left to position the images side by side and then vertical align will work:
.imageWrapper {
margin: 1em;
display: inline-block
vertical-align: bottom;
}
The best answer I've found was
#footer-widgets .widget {
display: inline-block;
float: none;
vertical-align: middle;
}
Source
加载中,请稍侯......
精彩评论