Question

如何在图片上absolute div内垂直对齐内容？

Answer 1

你必须这样做：

您需要将.article-comments显示为表格，并将内部封套显示为table-cell并设置为vertical-align:middle。

此解决方案允许您对内容进行垂直对齐，即使内容发生更改（例如：用户发表评论）

HTML：

<div class="picture-comments">
    <img class="img-responsive" src="http://www.healthyfoodhouse.com/wp-content/uploads/2012/10/5-healthy-breakfasts-for-fat-burning-eggs.jpg" alt="" title="" />
    <div class="article-comments">
        <div class="wrap">
            <h4>45</h4>
            <h4>comments</h4>
        </div>
    </div>
    <!-- /.comments -->
</div><!-- picture-comments -->

css：

.picture-comments {
    position: relative;
}

img {
    width: 100%;
}

.article-comments {
    text-align: center;
    color: #000;
    position: absolute;
    width: 50%;
    height: 100%;
    top: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.5);
    display:table;


    h4 {
        font-family: $body-font;
        font-weight: 600;
    }

    .wrap{
        display:table-cell;
        vertical-align:middle;
    }
}

}

Answer 2

你需要将图片定位为绝对，将div定位为相对。相对定位元素始终将自己定位到最后一个绝对定位元素的左上角。

e.g。

img 
{
    position:absolute;
    width: 100%;
}

.article-comments 
{
    position:relative;
}

然后你可以将你的div垂直对齐图像！

Answer 3

尝试在display: table-cell上使用vertical-align: middle;和.picture-comments。

用css垂直对齐图像

3 个答案: