I'd like to be able to position an image (blue) so that what ever size it is, it is always centered relative to the baseline of the div behind (red, not the containing div). The div behind will always be the same size/position.

Preferably this would be using css only as I'm using drupal and I don't know much about editing beyond the tpl files.

Thanks!

EDIT: Here's the layout http://pastebin.com/SisQHM4y

• html
• css
• image
• alignment

Hi you can do this pure css as like this

css

.wraptocenter {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
    width: 500px;
    height: 400px;
    background:green;
}

HTML

<div class="wraptocenter"><img src="//?" alt="images" /></div>

Live demo http://jsfiddle.net/rohitazad/tvrMp/

More information about this http://www.brunildo.org/test/img_center.html ​

Perhaps something like this:

<style>
 #blue { margin-left:auto;margin-right:auto; }
</style>

<div id="red">
 <div id="blue">
  <img src="?" id="myImg" />
 </div>
</div>

EDIT

I see, so you wish to center the x-axis horizontally, not vertically. And that link is a little messy. Perhaps you could try to

<style>
 .user-picture { margin-top: auto; margin-bottom: auto; }
</style>


<div class="content">
<div class="profile" typeof="sioc:UserAccount" about="/users/diver1">
    <div class="user-picture">
        <a href="/users/diver1" title="View user profile." class="active">
        <img typeof="foaf:Image" src="http://waterworksworldwide.com/sites/default/files/pictures/picture-126-1333572014.gif" alt="Diver1&#039;s picture" title="Diver1&#039;s picture" />
    </a>  
</div>
</div>

I am still having a little bit of a hard time seeing where the overlap between areas is as suggested by the red and blue in the question. If there is no overlap with my suggestion then please let me know and perhaps we can try to use some variations with position: absolute;