使用CSS在图像上垂直对齐

Question

How can I vertical align content inside absolute div on image?

http://jsfiddle.net/uxKpn/

Answer 1

You will have to do this :

FIDDLE

you nedd to display .article-comments as table and make an inner wraper displayed as table-cell and set to vertical-align:middle .

This solution alows you to vertical-align your content even if it changes (ex: a user posts a comment)

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

you need to make the picture positioned to absolute and the div to relative. relative positioned elements always position themselves to the left top corners of the last absolute positioned element.

eg

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

.article-comments 
{
    position:relative;
}

then you may be able to vertical align your div over the image!

Answer 3

Try to work with display: table-cell and vertical-align: middle; on .picture-comments .