CODEWITHSUNDEEP
cssvertical-alignment
outtacontext
outtacontext

Reputation: 49

Vertical Centering a Dynamic Image

Here's my situation: I have a changing image of various sizes (always different) being brought into an area of our splash. I posted a question about this a few days ago and employed the solutions that someone suggested. However, there were other issues that I also had to deal with I am back with an updated page that fixes other problems but I now need to see how to vertically center an image within this new code

First, here's the page: http://americanart.si.edu/index_newsplash3m.cfm

It's the middle image for our blog under the slider. Here's the code and css:

Code: 

 <div class="middle">
    <div class="middleimage">


            <img src="http://americanart.si.edu/eyelevel/images/luce_eyes.jpg" id="middleimg" alt="Blog: Eye Level Image" /><br />


        </div>


    <div id="middletext">

            <p>
<a href="http://americanart.si.edu/collections/search/artwork/?id=19670"><i>The Dying Tecumseh</i></a> by Ferdinand Pettrich has returned to the second floor galleries at American Art after his extended stay with the National Portrait Gallery for the exhibition, <a href="http://www.npg.si.edu/exhibit/exh1812.html"><i>1812: A Nation Emerges</i></a>. Visit his new spot among the ...

                </i>

            <span class="red"><a href="http://eyelevel.si.edu/">Read more...</a></span> </p>

        </div>
        </div>

And here is the CSS:

.middle {
    float: left;
    width: 30.5%;
    margin-right: 2.1%;
    margin-bottom: 2% ;
    background-color: #fff;
    min-height: 100%;
    background: url(/@res/img/americanart_blog_test.jpg) no-repeat #fff;
    padding-top: 31px;
    text-align: center;
    position: relative;
}

div.middleimage { height: 207px;
}

div#middletext {margin-right: 2.1%;
    margin-bottom: 2% ;
    background-color: #fff;
    min-height: 100%;
}
div.middle img#middleimg { max-height: 207px;
    max-width: 291px; 
    bottom:0;
    left:0;
    right:0;
    margin:auto;
    vertical-align: middle;
    position: relative;
}

I had to create some new nested divs around the image and text in order to keep the text from going into the image area when the image was of small height.

Thanks.

Upvotes: 2

Views: 1762

Answers (3)

Julian K
Julian K

Reputation: 2001

Centering things vertically in CSS is next to impossible, as far as I know. There's an article I've been meaning to read that may help you: http://designshack.net/articles/css/how-to-center-anything-with-css/

Upvotes: 0

jakmarkiewicz
jakmarkiewicz

Reputation: 51

You can also do this without any tables, simply add line-height: 207px; to your middleimage class and that should center the image inside.

div.middleimage {
line-height: 207px;
}

Upvotes: 1

Omega
Omega

Reputation: 3038

For div.middleimage add this css rule:

display:table;

Then wrap a div around your actual img tag like this:

<div id="imagewrap"><img src="http://americanart.si.edu/eyelevel/images/luce_eyes.jpg" id="middleimg" alt="Blog: Eye Level Image"></div>

And add this rule to your css:

#imagewrap {
display:table-cell;
vertical-align:middle;
}

Upvotes: 2

Related Questions