The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Vertically Centered Text

  • This topic is empty.
Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
  • #154670

    Here is the page this post concerns. When you scroll over the images, I would like the title and the description to be centered after it scrolls up. This would be easy if the title and description were each one line of text…but some of them are two lines of text.

    I was checking out @chriscoyier and his vertically center multi-lined text article, here, but I can’t seem to figure out how to merge the two.

    Here is the CSS I’m using for the gallery:

    .gallery {
        width: 970px;
        height: 100%;
        margin: 0 -10px 0 0;
    .image-container {
        width: 184px;
        height: 184px;
        overflow: hidden;
        background-color: #D7D7D7;
        margin: 0 10px 10px 0;
        float: left;
        color: #464646;
        position: relative;
        -o-border-radius: 0 0 3px 3px;
        -moz-border-radius: 0 0 3px 3px;
        -webkit-border-radius: 0 0 3px 3px;
        border-radius: 0 0 3px 3px;
    .image-container a {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        border-bottom: none;
    .image {
        /*height: 194px;*/
        margin-top: -12px;
        padding: 0 0 10px 0;
        transition: margin-top .3s ease-in-out .3s;
    .image h4 {
        margin-top: -6px;
        padding: 0 10px;
        text-align: center;
    .image p {
        margin-top: 0;
        padding: 0 10px;
        text-align: center;
    .image-container:hover .image {
        margin-top: -196px;

    And here is an example of the HTML:

    <div class="gallery">
        <div class="image-container">
            <a href="" alt="Poe Little and the Black Rabbit"></a>
            <div class="image">
                <img src="//" alt="Poe Little and the Black Rabbit" width="184" height="184" class="alignnone size-thumbnail wp-image-487" />
                <h4>Poe Little and the Black Rabbit</h4>
                <p>Adobe Photoshop</p>
            </div> <!-- end image-details -->
        </div> <!-- end image-container -->
    </div> <!-- end gallery -->

    Any help would be greatly appreciated. Thanks!


    Wrap the elements with div tag and style it by adding class to it.

    Full Size:

Viewing 2 posts - 1 through 2 (of 2 total)
  • The forum ‘CSS’ is closed to new topics and replies.