Results 1 to 1 of 1

Thread: How to Vertically Align a DIV

  1. #1
    Join Date
    Jan 2011
    Posts
    19

    How to Vertically Align a DIV

    EDIT: I added an example of what appears in HTML, because the PHP code is very hard to read

    Okay before you guys tear me a new one and tell me to Google this. I've searched everywhere for this and have been trying to implement the solution using top:50% and margin-top:image_size/2.

    For some reason nothing will work. I am looking for help more specific to my code and, yes, I have looked at several pages on Google to no avail. I have since deleted the code that was being used to try and vertically align the div, because it was really convoluting things.

    Any ideas?

    Here's my PHP portion I'm having trouble with:

    PHP Code:
                include('SimpleImage.php');
                while(
    $result_array mysql_fetch_array($result)){
                        
    $image = new SimpleImage();
                        
    $image->load($result_array['img']);
                        
    $height $image->getHeight();
                        
    $move_right $count_runs 5;
                        
    $height_from_top = (int)($count_runs 5);
                        
    $the_price = (float)($result_array['the_price']/100);
                        
                        
    $display_block .= "
                            <div id=\"container"
    .$result_array['id']."\" class=\"view_container\" style=\"left:".($move_right*167+17)."px; top: ".($height_from_top*227+17)."px;\">
                            <div id=\"content"
    .$result_array['id']."\" class=\"view_content\">
                                "
    .substr($result_array['name'],0,45)."<br>
                                <div id=\"view_img"
    .$result_array['id']."\" class=\"view_img\">
                                <center><img src=\""
    .$result_array['img']."\" border=\"0\" name=\"img".$result_array['id']."\" class=\"prod_img\"></center>
                                </div>
                                <div id=\"button"
    .$result_array['id']."\" class=\"view_button\">
                                <a href=\"buynow.php\" id=\"buynow\">BUY NOW: $"
    .$the_price."</a><br>
                        "
    ;
                        
                        if(!isset(
    $_COOKIE['user'])){
                            
    $display_block .= "<a href=\"index.php?page=Login\"><img src=\"main_page/view_button_mainscreen.png\" name=\"button".$result_array['id']."\" border=\"0\" onMouseOver = \"window.document.button".$result_array['id'].".src = 'main_page/Login_button_mainscreen.png'\" onMouseOut = \"window.document.button".$result_array['id'].".src = 'main_page/view_button_mainscreen.png'\"></a>";
                        }else{
                            
    $display_block .= "<a href=\"view.php\"><img src=\"main_page/view_button_mainscreen.png\" name=\"button".$result_array['id']."\" border=\"0\"></a>";
                        }                    
                        
    $display_block .= "        
                            </div>    
                            </div>
                            </div>
                        "
    ;
                        
                    if(
    $count_runs 4){
                        
    $display_block .= "<br>";
                    }
                    
    $count_runs++;
                } 

    Code:
    .view_container{
    	position:absolute;
    	width: 150px;
    	height: 210px;
    	background-image: url(main_page/viewbox.png);
    	text-align: center;
    }
    
    .view_button{
    	position:absolute;
    	top: 143px;
    	left: 0px;
    	width: 135px;
    	height: 65px;
    	padding: 3px 3px 3px 0px;
    }
    
    .view_content{
    	position:absolute;
    	text-align: center;
    	vertical-align: middle;
    	top: -5px;
    	left: 4px;
    	width:135px;
    	height:210px;
    	margin: 10px 100px 10px 3px;
    }
    
    .view_img{
    	position:absolute;
    	width:130px;
    	height:100px;
    	top:35px;
    	left:0px;
    	vertical-align:middle;
    }
    
    .prod_img{
    	vertical-align:middle;
    }
    Code:
    <div id="container12" class="view_container" style="left:351px; top: 17px;">
    
    	<div id="content12" class="view_content">
    
    		HP - Pavilion Special Edition Desktop<br>
    
    		<div id="view_img12" class="view_img">
    
    			<center><img src="product_images/HP_pavilion_special_edition.jpg" border="0" name="img12" class="prod_img"></center>
    
    		</div>
    
    		<div id="viewing12" class="viewing"><a href="buynow.php" id="buynow">BUY NOW: $549.99</a><br><a href="#" onClick="view('12');"><img src="main_page/view_button_mainscreen.png" name="button12" border="0"></a>		
    
    		</div>	
    
    	</div>
    
    </div>
    Last edited by GoDawgs; 26 Jan 2011 at 11:59 AM. Reason: Added some HTML code

Similar Threads

  1. CSS DIV vertical align to bottom
    By xraverx in forum Web Design, HTML Reference and CSS
    Replies: 0
    Last Post: 25 Oct 2010, 04:40 AM
  2. Easy question for anyone here but me: vertically align the text anchor tag?
    By pauljamesw in forum Web Design, HTML Reference and CSS
    Replies: 1
    Last Post: 20 Jun 2010, 10:25 PM
  3. How to align the contents of a div
    By bUrGe in forum Web Design, HTML Reference and CSS
    Replies: 1
    Last Post: 16 Jun 2009, 02:02 AM

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •