Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations strongm on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Vertically Align an Image in an Anchor Tag 1

Status
Not open for further replies.
TheInsider

TheInsider

Programmer
Jul 17, 2000
796
CA
Hi,

Hopefully someone can help me with this. I'm trying to create a reusable div "pane" that can be modified to stack vertically or horizontally.

The concept is like the search rows returned on Ebay, where each box will represent an individual item result. However, I want the layout to be more dynamic. For example, on one page, I will set the width to 100%, so the divs stack vertically. On another page, I want the divs to align left so they run horizontally. (The text inside the div will adjust according.)

In summary, the results page could look like:
#
#
#
#

or:

####
####

where # is a single div pane.

So far I've managed to hack something together that works in IE7, Safari, and Firefox 3. However, the line-height and vertical-align in the a.thumbnail class only centers the image vertically in Safari and Firefox. I can't get images that are shorter than 134px to center vertically in IE7. If you try the code below with 50px x 50px image, you'll see it works properly in Firefox but not IE.

That said, the line-height does create odd results in Firefox if I don't set the overflow: hidden for a.thumbnail.

I appreciate any help.

TIA!

Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
</head>
<body>
<style type="text/css">
a:active, a:link, a:visited {
	text-decoration: none;
	color: #0066cc;
}

div#main {
	width: 700px;
}

img {
	border: none;
}



div.previewPane {
	display: inline;
	float: left; /* required for [display: inline] effect to display correctly in Mozilla */
	margin: 0 9px 9px 0;
	width: 169px;
	height: 200px;
	overflow: auto;
	border: 1px solid #ceceda;
}

div.previewPane a.thumbnail {
	float: left;
	width: 134px;
	height: 134px;
	margin: 0 9px 9px 0;
	border: 1px solid #ceceda;
	text-align: center;
/* the code below only works in Safari and Firefox but not IE7 */
line-height: 134px;
vertical-align: middle;
}

div.previewPane a.thumbnail img {
	max-width: 134px;
	max-height: 134px;
}

div.previewPane p {
	margin: 0;
	padding: 9px;
}
</style>
<div id="main">
	<div class="previewPane">
		<p><a class="thumbnail" href="default.php"><img src="images/no_preview.gif"></a>words words words words words words words words words words words words words words words words words</p>
	</div>
	<div class="previewPane">
		<p><a class="thumbnail" href="default.php"><img src="images/no_preview.gif"></a>words words words</p>
	</div>
	<div class="previewPane">
		<p><a class="thumbnail" href="default.php"><img src="images/no_preview.gif"></a>words words words</p>
	</div>
	<div class="previewPane">
		<p><a class="thumbnail" href="default.php"><img src="images/no_preview.gif"></a>words words words</p>
	</div>
	<div class="previewPane">
		<p><a class="thumbnail" href="default.php"><img src="images/no_preview.gif"></a>words words words</p>
	</div>
	<div class="previewPane" style="width: 300px;">
		<p><a class="thumbnail" href="default.php"><img src="images/no_preview.gif" width="50" width="50"></a>words words words</p>
	</div>
</div>
</body>
</html>
 
Sort by date Sort by votes
assuming that the content is the same size then just setting your div to a fixed width and height should do the trick.

especially if you are floating left.

the only problem with floating left in a non fixed width cntainer is that the number of columns for the divs will be different depending on resolutions.

also ill let someone more seasoned in css come along and comment on your coding because just from what I see it looks screwy.

Check out this link for vertical centering
Darryn Cooke
| The New Orange County Graphic designer and Marketing and Advertising Consultant
| Marketing and Advertising blog
 
Upvote 0 Downvote
Thanks for the reply. I'm only having a problem getting the <img> vertically aligned inside the <a> tag in both Firefox and IE. Right now it only works in Firefox and Safari.

But yes, I admit the CSS is sloppy. Though this is just a test page I'm playing with at the moment.

I was hoping to avoid nesting several DIV tags to accomplish this task. When I started with Web development (back in the days of ASP 3), I used to design everything with tables. There was a lot of overhead, but it was dead simple to accomplish anything with some nested tables and a little CSS.

I haven't done any web design for years, but I'm happy to switch to DIVs. The concept is cleaner (in theory anyway), but I'm finding it a pain to get the different browsers to position things the way I want.

If you try the above code in IE and Firefox, you'll see what I'm trying to accomplish... except the smaller images should be in the middle of the anchor tags. Right now in IE, the smaller images center horizontally but not vertically.

I guess my question really centers (no pun intended) around the following lines:
Code: 
div.previewPane a.thumbnail {
...
    line-height: 134px;
    vertical-align: middle;
}
 
Upvote 0 Downvote
vertical-align: middle; - doesnt do in CSS what it used to in tables.

let me ask you this. if your divs are all the same fixed dimensions and your images are all the same dimensions you can accomplish what you want using padding.

Darryn Cooke
| The New Orange County Graphic designer and Marketing and Advertising Consultant
| Marketing and Advertising blog
 
Upvote 0 Downvote
I tried padding with auto, but unfortunately it didn't work. The DIVs will be a fixed size, but the images can vary in size. This is why I'm using max-width and max-height instead of width and height. The actual images may be 50 x 50 or 200 x 200 but I want to use CSS to scale them to fit in a 134 x 134 border -- the border being an <a> tag that wraps the images and has a fixed size of 134 x 134 with a 1px border. So, if the scaled images doesn't fill the 134 x 134 anchor tag, then I want the image to be centered horizontally (this I've got working so far) and vertically (this I haven't). I purposely want the <a> tag to function as both an anchor and a fixed size border around the images. Hopefully this is possible without making a bigger mess of the code.

Thanks
 
Upvote 0 Downvote
I have such a hard time with vertically aligning stuff that I usually dont bother.

Sorry that I cant help more but try this link
I do still think that your whole code needs a reword and this link should help you out.

Darryn Cooke
| The New Orange County Graphic designer and Marketing and Advertising Consultant
| Marketing and Advertising blog
 
Upvote 0 Downvote
As mentioned, centring vertically in CSS is quite a hassle. I would actually suggest, as a first option, to make sure all your images are uniform size (134px in your case). That will yield much better results. If you have to use images of varying sizes, then you will have to either:

1. Employ one of these complicated methods of vertical centring in CSS.
2. Accept the fact that images will be aligned to the top.
3. Programmatically calculate the size of each image and adjust the paddings for images that are too small.

[small]Do something about world cancer today: Comprehensive cancer control information at PACT[/small]
 
Upvote 0 Downvote
Thank you darryncooke and Vragabond for your help. I actually figured out what I was doing wrong. The solution was to set the line-height in the anchor tag to the height of the anchor tag (i.e. [height: 134px] and [line-height: 134px]), and then to place [vertical-align: middle] in the img tag.

Centering elements could definitely be made easier in CSS, but I think my problem was simply not understanding which element should get which style. I also cleaned up the CSS quite a bit, and dropped the div tag in favor of a simple <p> tag.

darryncooke's link was helpful, but the concept still wasn't quite clear to me until I read the first part of this page:


Code: 
...
div {
    height: 100px;
    line-height: 100px;
    white-space: nowrap;
}

img { vertical-align: middle; }
...
 
Upvote 0 Downvote
That still looks like a hack.

if you could only get your images to be the same dimension you would save yourself a lot of headaches.

then you are looking at a div of height of x and to vertically align images it would just be top and bottom padding of y which would give you a div of dimensions of h=x and top and bottom padding of y. that is the cleanest option

Darryn Cooke
| The New Orange County Graphic designer and Marketing and Advertising Consultant
| Marketing and Advertising blog
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

scorney
  • Question
background image with overlay which Hover when over a specific Area/Form
Replies
1
Views
319
3esolar
3
lmcate
  • Locked
  • Question
From HTML Page open an MDB files on the server and work
Replies
0
Views
107
lmcate
lmcate
cae154
  • Locked
  • Question
Body of email not appearing in correct font on iPhone and iPad
Replies
1
Views
398
spamjim
spamjim
jizzer
  • Locked
  • Question
HTML/CSS Image map with multiple tool-tips
Replies
3
Views
656
spamjim
spamjim
soni21
  • Locked
  • Question
JavaScript String to Number Conversion in HTML: Seeking Clarification
Replies
4
Views
689
Chris Miller
Chris Miller

Part and Inventory Search

Sponsor

Back
Top