Div align middle

Discussion in 'CSS' started by tirso, Mar 29, 2009.

  1. #1
    hi to all

    I have a round boxes using div, Inside this div there is an picture image which doesn't have a fix size fot both height and with. I want to put on the left and right side of another image such as left_anim.gif and right_anim.gif . But I want to center vertically this gif. If the picture image have a fix size I can center it vertically but it will varies depend on the size of the pictures, How can I achive this.

    any suggestions would greatly appreciated

    thanks in advance
    Tirso

    here is the sample link

    http://www.tirso.webberzsoft.com/mypicturecards_individual_others.php

    here is the code

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>CSS Example - How to create rounded corner boxes using CSS</title>
    <link type="text/css" rel="stylesheet" href="css/css.css" />
    </head>
    
    <body>
     <div id="formdiv">
       <div id="picturecards_individual">	                   
          <div class="top"><div class="bottom"><div class="left"><div class="right"><div class="bl"><div class="br"><div class="tl"><div class="tr">
              <div id="buttons">
                <div class="cont">
                  <div class="frame" id="frameimage">
                   <div style="float:left; vertical-align: middle"><img src="images/left_anim.gif" /></div><img src="picturecards/individual/DSCF0011.JPG"/></div>
                </div>
              </div>
              <div style="clear:both"></div>                           
          </div></div></div></div></div></div></div></div>  <!--end of rounded box-->
      </div>
    </div>                             
    </body>
    </html>
    Code (markup):
     
    tirso, Mar 29, 2009 IP
  2. fex

    fex Peon

    Messages:
    89
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    0
    #2
    Hi tirso,

    I think I'm able to put you in the right direction.. I'll try helping you with a bit of javascript.

    First, change a bit of your coding as follows. Put left_anim.gif and your picture in a different div with id's, like this:
    <div id="left_anim" style="float: left;"><img src="images/left_anim.gif" /></div>
    <div id="picture" style="float: left;"><img src="picturecards/individual/DSCF0011.JPG"/></div>
    Code (markup):
    Then, add a javascript at the very bottom of your body section:
    <script type="text/javascript">
    //Get elements
    var pic = document.getElementById('picture');
    var anim_left = document.getElementById('left_anim');
    
    //Get heights
    var pic_height = pic.offsetHeight;
    var left_anim_height = anim_left.offsetHeight;
    
    //Make sure both div's have same height
    //The smallest one enlarges to the size of the bigger one
    //Note: Same as if & else construction, other typo
    pic_height > left_anim_height ? left_anim_height.style.height = pic_height + "px" : pic_height.style.height = left_anim_height + "px";
    
    //Get new heights
    var pic_h = pic.offsetHeight;
    var left_anim_h = anim_left.offsetHeight;
    
    //Calcute anim picture position
    var center = pic_h/2;
    var anim_left_top = center - (left_anim_h/2)
    
    //Set div style
    left_anim.style.marginTop = anim_left_top + "px";
    }
    </script>
    Code (markup):
    I advise you to put the javascript code in a seperate .js file, without the script tags ofcourse. Then refer to it (at the very end of body section) as:
    <script type="text/javascript" src="pathToScript/scriptName.js"></script>
    Code (markup):
    I've got something similar implemented on my site, which works for me ;)
     
    fex, Apr 1, 2009 IP
    rowen77 likes this.