Vertical alignment of thumbnail images in Album

Have a question or a suggestion about a 3rd party addon module or plugin?
Let us know here.
Post Reply
kanjigirl
Forum Members
Forum Members
Posts: 52
Joined: Fri Aug 01, 2008 11:23 pm

Vertical alignment of thumbnail images in Album

Post by kanjigirl »

I'm trying to vertically center the thumbnail images here, rather than have them display at the top of .thumb:

http://www.redkitecreative.com/projects/naww/index.php?page=gallery

I'm using Simple-Separate-Pages template but I don't think that matters.

I've tried putting a line-height of 96 (equal to the height) on .thumb, making .thumb a img display as table-cell and then giving it a vertical-align: middle... not working.

Any suggestions?
User avatar
Nullig
Power Poster
Power Poster
Posts: 2380
Joined: Fri Feb 02, 2007 4:31 pm
Location: Comox Valley, BC

Re: Vertical alignment of thumbnail images in Album

Post by Nullig »

Like this?

.thumb {
padding: 0;
height: 96px;
width: 96px;
margin: 60px 0 0 0; /* Thumbnail spacing */
text-decoration: none;
line-height: normal;
list-style-type: none;
text-align: center;
background-color: #EAE7EF;
border: 1px solid #E1DDE8;
}

Nullig
kanjigirl
Forum Members
Forum Members
Posts: 52
Joined: Fri Aug 01, 2008 11:23 pm

Re: Vertical alignment of thumbnail images in Album

Post by kanjigirl »

No - that's almost the same as what I have already:

Code: Select all

.thumb {
	padding: 0;
	height: 96px;
	width: 96px;
	margin: 0 1.2em 1em 0;  /*Thumbnail spacing */  
	text-decoration: none;
	line-height: normal;
	list-style-type: none;
	text-align: center;
	float: left;
	background-color: #EAE7EF;
	border: 1px solid #E1DDE8;
}
.thumb a {
	display: block;
	width: 96px; /* Thumb width*/
	width: 96px; /* Thumb padding to form thumb frame */
	margin: 0;
	background-color: transparent;
	border: 0; 
	text-decoration: none;
	text-align: center;
}
.thumb a img {
	margin: 0 auto;
	padding: 0;
}
I need to center the img vertically within the .thumb.
Post Reply

Return to “Modules/Add-Ons”