Question

在这种情况下，有没有办法用CSS垂直对齐照片？我尝试添加vertical-align，但它不适用于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>

[这就是我所做的] 我可以用JQuery做到这一点，但有些照片是动态添加的，有些是在错误处理程序（image_not_available.jpg）上添加的，所以这种方法很难应用。

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

Answer 1

#albumList {
  display: table;
}

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

Answer 2

你可以设置行高与div.row的高度相同

.row {
height: 200px;
line-height: 200px;
}

Answer 3

要在div中使用垂直对齐，您需要使用display属性table-cell。

以下是一个例子： 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;
}

希望这就是你要找的东西。

Answer 4

vertical-align仅适用于内联元素（或表格单元格内的元素），因此请使用display: inline-block代替float: left并排放置图像，然后垂直对齐将起作用：

.imageWrapper {
    margin: 1em;
    display: inline-block
    vertical-align: bottom;
}

Answer 5

我发现的最佳答案是

#footer-widgets .widget {
    display: inline-block;
    float: none;
    vertical-align: middle;
}

Source

垂直对齐同一行上的照片

5 个答案: