PDA

View Full Version : Unable to figure out why vertical aligned image/text code won't work.



antigrav420
Mar 15th, 2010, 07:44 PM
So, I'm trying to align the image vertically inside the left box, and the text left-aligned, centered vertically in the right box, and for the LIFE of me I can't figure out why the code I've written here will not work. I wanted to stay away from tables but have decided it must be the only way to accomplish this. Here's the code verbatim:

<div class="BizPartnerBlock">
<div style="text-align: center;">&nbsp;</div>
<div class="BizPartnerLogo" style="text-align: left;">
<table>
<tbody>
<tr>
<td><img height="78" width="150" src="/images/BusinessPartners/fedpay-150x78.gif" alt="FedPay USA" /> </td>
</tr>
</tbody>
</table></div>
<div class="BizPartnertext">BUNCH OF TEXT AND EMAIL LINKS </div>
<div class="clearboth">&nbsp;</div></div>

So far I've gotten it to look better than it did, aligned at the top of the block, but it's still not how I want it. Horizontally and vertically aligned graphic in a left block with vertically aligned to the left.

If anyone can please help, I would SO GREATLY appreciate it. Thank you very much for anyone who may have the time/willingness to help me on this.

Excavator
Mar 15th, 2010, 08:08 PM
Hello antigrav420,
Some vertical center examples here (http://nopeople.com/CSS/vertical%20center%20with%20CSS/), may help.

Josephbm91
Mar 15th, 2010, 08:13 PM
If the "boxes" are static and not fluid, you could go about using this.




<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Manually Vertically Align Images</title>

<style type="text/css">

/*In all these examples, we are centering a 50px by 50px square*/

#wrapper{
width:800px;
margin: 20px auto;}

.btest{border: 1px solid #000000;}

h1{margin: 0px auto; text-align: center;}

#example1{
margin: 30px auto;
width: 600px;
height: 400px;
border: 2px solid #000000;}

#example1 img{
display: block;
margin: 175px auto; /* (400-50)/2 = 175 */
}

#example2{
margin: 30px auto;
width: 200px;
height: 300px;
border: 2px solid #000000;}

#example2 img{
display: block;
margin: 125px auto; /* (300-50)/2 = 125 */
}

#example3{
margin: 30px auto;
width: 400px;
height: 250px;
border: 2px solid #000000;}

#example3 img{
display: block;
margin: 100px auto; /* (250-50)/2 = 100 */
}

#example4{
margin: 30px auto;
width: 460px;
height: 120px;
border: 2px solid #000000;}

#example4 img{
display: block;
margin: 35px auto; /* (120-50)/2 = 35 */
}




</style>
</head>
<body>
<div id="wrapper">
<h1>Manually Vertically Center an Image in a Div</h1>

<div id="example1"><img src="http://mcculloughdesigns.com/forums/imagesize/images/50px.jpg" alt="50 by 50px square" /></div>
<div id="example2"><img src="http://mcculloughdesigns.com/forums/imagesize/images/50px.jpg" alt="50 by 50px square" /></div>
<div id="example3"><img src="http://mcculloughdesigns.com/forums/imagesize/images/50px.jpg" alt="50 by 50px square" /></div>
<div id="example4"><img src="http://mcculloughdesigns.com/forums/imagesize/images/50px.jpg" alt="50 by 50px square" /></div>







</div>
</body>
</html>