Float image left and middle vertical align text??

**Protoss** · Apr 5, 2005 08:18

In tables I could do this quite easily with the following code:

Code:

<table>
     <tr>
          <td align="center"><img src="/images/storeitem.gif" /></td>
          <td>Item name<br />$Price</td>
     </tr>
     <tr>
          <td align="center"><img src="/images/storeitem.gif" /></td>
          <td>Item name<br />$Price</td>
     </tr>
     <tr>
          <td align="center"><img src="/images/storeitem.gif" /></td>
          <td>Item name<br />$Price</td>
     </tr>
</table>

I want to center align the images because they vary in width slightly (randomly being pulled from database), and would like to middle vertical align the item name and price, however am having a bit of trouble replicating this using CSS only.

Any pointers from some CSS masters here (I'm still relatively new to it) would be greatly appreciated.

**DocType** · Apr 5, 2005 13:22

I wish I could find a simple answer to that one, unfortunately I can't.

As far as lining up the images, you can float them, give them position relative, and space them with margin.

The captions will require a seperate element, placed above the images.

You can use <pre> to format the horizontal spacing of the text, as long as the width of the images doesn't vary much, it'll center over the images well.

Here's an example.

JavaScript might be a better solution, since it will give you more control over the number of images per line, based on their width, that's where you'll most likely have problems.

Code:

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<head>
<title>Put A Title In This Thing!</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
 
html,body{background:#6D8597;
	margin:0;
	padding:0;
	border:0; overflow:auto;}
#container{position: absolute ; width:100%;
				 height:470px;
				 background:white;} 
 
.image1{float:left; position:relative; top:50px; left:25px; margin:0 50px 0 0;
				width:57px; height:46px; background:gainsboro;
text-align:center;} 
.image2{float:left; position:relative; top:50px; left:25px; margin:0 50px 0 0;
				width:215px; height:197px; background:gainsboro;
text-align:center;} 
.image3{float:left; position:relative; top:50px; left:25px; margin:0 50px 0 0;
				width:57px; height:46px; background:gainsboro;
text-align:center;} 
.image4{float:left; position:relative; top:50px; left:25px; margin:0 50px 0 0;
				width:215px; height:197px; background:gainsboro;
text-align:center;} 
.caption{position:absolute; top:10px; left:20px; font-weight:bold;} 
 
</style>
</head>
<body>
<div id="container">
<pre class="caption">Image One			 Image Two			 Image Three			 Image Four</pre>
<div class="image1">
Image
</div> 
<div class="image2">
Image
</div> 
<div class="image3">
Image 
</div> 
<div class="image4">
Image 
</div> 
</div>
</body>
</html>

As long your images are fairly close to the same width and are placed in the same order according to width, as in the example, you won't have any problems; However, even if the images only vary by a pixel or so, if they are placed randomly, you'll eventually have some spacing issues and problems keeping the captions centered over the images.

JavaScript is one solution to that problem.

**Protoss** · Apr 6, 2005 06:25

Thank you for the well-thought-out reply!

**DocType** · Apr 6, 2005 22:16

No problem.

Another way to do it is to put the image AND the caption in the same div, with the caption text above the image, and give the div text-align:center.

User Tag List

Thread: Float image left and middle vertical align text??

Thread Tools

Display

Float image left and middle vertical align text??

Bookmarks

Bookmarks

Posting Permissions