Question

绝对位置是不可能的。 vertical-align：bottom;显示：table-cell;会工作，但它也需要集中。

我需要div内的图像与底部对齐。图像高度不同。

我应该只定位每个图像并计算容器高度并将剩余物用作顶部边距还是更容易解决？

谢谢！

Answer 1

您可以设置div的'line-height'和'text-align'属性，然后设置div内图像的'vertical-align'属性。

即。

div.images
{
    width: 720px;
    display: block;
    text-align: center;
    line-height: 720px;
}
div.images img
{
    vertical-align: bottom;
}

Answer 2

您无需相对于整个页面进行绝对定位。您只需打开容器的相对位置即可：

$("#my_id").parent().position(position : "relative");

然后将您的元素绝对置于

之内

$("#my_id").position( position : "absolute", left : ______, top : ______ )

或在css中，

#my_container {
  position: relative;
}

#my_id {
  position: absolute;
  left: __;
  top:  __;
}

Answer 3

您可以将图片添加为背景，并使用bottom center进行定位：

div {
    background: url("path_to_img") no-repeat bottom center;
    width: 500px;
    height: 500px;
    background-color: #e1e1e1;
}

Answer 4

你不需要jquery：

<div id="wrap">
    <img src="img/image.jpg" alt="" />
</div>

#wrap { position: relative; }
#wrap img {
    position: absolute; /* display: block is implied */
    bottom: 0;
}

jquery对齐div内部的底部

4 个答案: