Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    New Coder
    Join Date
    Jan 2014
    Posts
    74
    Thanks
    11
    Thanked 0 Times in 0 Posts

    Can't vertical align my text no matter what

    I am trying to centre the contents of a DIV, and no matter which way I try I can't do it and wondering if someone can help me. The DIV I want to centre is class="sizes".

    Methods I have tried:

    Placing everything in a table and setting the TD to valign="center".

    Making the DIV inline-display and then setting vertical-align: center.

    I can't seem to get it working no matter what.

    I can't use the top 50%, margin-top divided by 2 trick because the content will be variable.

    Someone please help.

    Code:
    <?php
    	session_start();
    	$link = mysql_connect('localhost', 'test', '1') OR die(mysql_error());
    	mysql_select_db('testdb', $link);
    ?>
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
            "http://www.w3.org/TR/html4/strict.dtd">
    <HTML>
    	<HEAD>
    		<TITLE></TITLE>
    		<LINK href="/body.css" rel="stylesheet" type="text/css">
    		<STYLE type="text/css">
    			div.location {
    				left: 6px;
    				top: 83px;
    				position: absolute
    			}
    			div.sizes {
    				background-color: orange;
    				height: 222px;
    				margin-left: 222px;
    				margin-top: -302px;
    				position: absolute;
    			}
    			div.spacer {
    				height: 44px
    			}
    			input.quantity {
    				width: 16px
    			}
    			table.cart {
    				margin-left: 6px;
    				margin-top: 21px
    			}
    			td.product {
    				background-color: blue;
    				padding-bottom: 19px;
    				padding-top: 19px;
    				text-align: center
    			}
    		</STYLE>
    		<META content="charset=utf-8; text/html" http-equiv="Content-Type">
    	</HEAD>
    	<BODY>
    		<DIV class="main">
    			<DIV class="topspacer"></DIV>
    			<IMG alt="" class="logo" src="/logo.png">
    			<DIV class="menu1"><?php include '../rawcode/menu/menu1'; ?></DIV>
    			<DIV class="menu2"><?php include '../rawcode/menu/menu2'; ?></DIV>
    			<DIV class="menu4"><?php include '../rawcode/menu/menu4cart'; ?></DIV>
    			<DIV class="topbar"></DIV>
    			<DIV class="location">> CART</DIV>
    			<TABLE cellpadding="0px" cellspacing="0px" class="cart">
    				<?php
    					if (empty($_SESSION['login']['customernumber'])) {
    						$cartholder = session_id();
    					} else {
    						$cartholder = $_SESSION['login']['customernumber'];
    					}
    					$query = "SELECT * FROM cart WHERE cartholder = '".$cartholder."'";
    					$result = mysql_query($query);
    					while ($row = mysql_fetch_assoc($result)) {
    						$query2 = "SELECT * FROM products WHERE number = ".$row['number']."";
    						$result2 = mysql_query($query2);
    						$row2 = mysql_fetch_assoc($result2);
    						if ($row2['gender'] == 'Mens') {$gender = 'mens';} else {$gender = 'womens';}
    						if ($row2['type'] == 'T-Shirt') {$type = 't-shirts';}
    						$number = $row2['number'];
    						$brand = $row2['brand'];
    						$name = $row2['name'];
    						$price = $row2['price'];
    						echo '
    							<TR>
    								<TD class="product">
    									<A href="/products/'.$gender.'/'.$type.'/product/?productnumber='.$number.'"><IMG alt="" src="/products/'.$gender.'/'.$type.'/'.$number.'/thumb.png"></A>
    									<BR>
    									'.$brand.'
    									<BR>
    									'.$name.'
    									<BR>
    									<BR>
    									$'.$price.'
    									<DIV class="sizes">
    										SIZE
    										<BR>
    										<BR>
    										<FORM action="" method="post" name="product"">
    											';
    											if ($row['sizes'] > 0) {echo 'S: <INPUT class="quantity" name="sizes" value="'.$row['sizes'].'">';}
    											echo '
    											<BR>
    											<BR>
    											<INPUT type="submit" value="UPDATE">
    										</FORM>
    									</DIV>
    								</TD>
    							</TR>
    						';
    					}
    				?>
    			</TABLE>
    			<DIV class="spacer"></DIV>
    			<DIV class="bottomholder">
    				<DIV class="bottombar"></DIV>
    				<DIV class="menu3"><?php include '../rawcode/menu/menu3'; ?></DIV>
    			</DIV>
    			<DIV class="bottomspacer"></DIV>
    		</DIV>
    	</BODY>
    </HTML>
    <?php mysql_close($link); ?>

  • #2
    Regular Coder COBOLdinosaur's Avatar
    Join Date
    Jul 2002
    Location
    Canada
    Posts
    411
    Thanks
    2
    Thanked 32 Times in 32 Posts
    set the CSS for the div to display:table-cell;vertical-align:middle; and it should handle the vertical centering.

    Additional display options for HTML elements can be found on my personal site.
    100% standards compliant code is 100% correct 100% of the time.
    one of my toys from my repository and perhaps some help getting help

    Cd&

  • #3
    New Coder
    Join Date
    Jan 2014
    Posts
    74
    Thanks
    11
    Thanked 0 Times in 0 Posts
    It did't work.

    Thanks but

  • #4
    New Coder
    Join Date
    Jan 2014
    Posts
    74
    Thanks
    11
    Thanked 0 Times in 0 Posts
    Bump.

  • #5
    Regular Coder COBOLdinosaur's Avatar
    Join Date
    Jul 2002
    Location
    Canada
    Posts
    411
    Thanks
    2
    Thanked 32 Times in 32 Posts
    It might be getting screwed by the use of absolute positioning. As soon as you start using absolute positioning you disrupt the normal rendering flow of the page. It is also possible that you are well outside the limitations of the obsolete doctype you are using. In any case further diagnostics will require a link to the page.
    100% standards compliant code is 100% correct 100% of the time.
    one of my toys from my repository and perhaps some help getting help

    Cd&

  • #6
    New Coder
    Join Date
    Jan 2014
    Posts
    74
    Thanks
    11
    Thanked 0 Times in 0 Posts
    its because of the limitations of the obselete doctype, which sadly is currently the standard.

  • #7
    New Coder
    Join Date
    Jun 2005
    Location
    Blackpool. UK
    Posts
    98
    Thanks
    0
    Thanked 4 Times in 4 Posts
    How can "obsolete" be the "standard". The problem there is that you are misunderstanding what Document Type Declarations are.

    You are not supposed to use the "latest" as some status symbol of developer snobbery. ALL document types are current and usable, and THAT means everyone that has a "Recommended" status, the HTML5 DTD is NOT actually at "recommended" yet so it not actually "the standard" that you seem to consider it as.

    DTDs exist so a developer can use one that is appropriate to the type of coding the document contains, to inform user agent how to render the markup. XHTML DTD were created for XML / XSL translated documents NOT so developers who knew no better could play some silly game of "one-up man-ship" of "I must be better than you because I use XHTML and you use HTML4.01 nee, na nee na nah!.

    The HTML5 DTD is for documents that should conform to the HTML5 specifications NOT to be used ALWAYS because it is the "newest".
    Chris

    Indifference will be the downfall of mankind, but who cares?


  •  

    Posting Permissions

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