Page 1 of 1

Vertical alignment of thumbnail images in Album

Posted: Wed Sep 17, 2008 11:32 pm
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?

Re: Vertical alignment of thumbnail images in Album

Posted: Thu Sep 18, 2008 4:31 am
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

Re: Vertical alignment of thumbnail images in Album

Posted: Thu Sep 18, 2008 2:06 pm
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.