Author Topic: Aligning Thumbnails Vertically to Bottom (Read 3279 times)

ShazamImages · « **on:** August 12, 2013, 13:09 »

I have spent hours on this and can't find a solution.

If you take a look at my homepage (http://shazamimages.com/), you will see that the thumbnails are currently aligned vertically towards the top. In other words, the top of each image is aligned along a line.

I would like to have the thumbnails on my home page align vertically towards the bottom. In other words, the bottom of each image should align along a line.

Is there any way to do this in CSS?

Kerioak~Christine · « **Reply #1 on:** August 12, 2013, 14:14 »

Yes, use Plrangs plug in so you get square thumbnails and they all align ?

ShazamImages · « **Reply #2 on:** August 12, 2013, 14:38 »

Thanks.

Anyone know a solution without using a plugin? Via CSS?

Redneck · « **Reply #3 on:** August 12, 2013, 14:55 »

Try adding this to your child theme CSS.

Quote

.attachment-post-thumbnail {
vertical-align: bottom;
}

ShazamImages · « **Reply #4 on:** August 12, 2013, 15:02 »

Quote from: Redneck on August 12, 2013, 14:55

Try adding this to your child theme CSS.

Quote
.attachment-post-thumbnail {
vertical-align: bottom;
}

Thanks, but that doesn't seem to work.

I also don't see that tag (.attachment-post-thumbnail) in the original CSS docs. Just wondering, where did you get this from?

cathyslife · « **Reply #5 on:** August 12, 2013, 17:53 »

Try this:

Code: [Select]

.widget-featured img {   vertical-align: bottom;}

ShazamImages · « **Reply #6 on:** August 12, 2013, 19:02 »

Quote from: cathyslife stockphotos.com on August 12, 2013, 17:53

Try this:

Code: [Select]
.widget-featured img { vertical-align: bottom;}

Thanks, but that didn't work either.

Anyone else?

plrang · « **Reply #7 on:** August 12, 2013, 19:59 »

Code: [Select]


.symbiostock-latest, .symbiostock-featured { position:relative }	
.inner-latest, .inner-featured { position:absolute;bottom:0;left:0;right:0;text-align:center }

try this
(updated the centering)

Leo Blanchette · « **Reply #8 on:** August 12, 2013, 20:46 »

Quote from: plrang on August 12, 2013, 19:59

Code: [Select]
.symbiostock-latest, .symbiostock-featured { position:relative } .inner-latest, .inner-featured { position:absolute;bottom:0;left:0;right:0;text-align:center }
try this
(updated the centering)

Yeah, let me know if that works. Up/down alignment is far trickier than left/right in CSS.

Its kind of funny, because HTML is actually just an XML document with its nails painted. Its amazing things have progressed as far as they have visually.

ShazamImages · « **Reply #9 on:** August 13, 2013, 05:25 »

Quote from: plrang on August 12, 2013, 19:59

Code: [Select]
.symbiostock-latest, .symbiostock-featured { position:relative } .inner-latest, .inner-featured { position:absolute;bottom:0;left:0;right:0;text-align:center }
try this
(updated the centering)

Thanks, that seems to have done it. It's weird though, because when I just copied it as is and pasted it, it didn't work at first. I then formatted it as follows and it started working:

Code: [Select]

.symbiostock-latest, .symbiostock-featured { 
	position:relative 
}

.inner-latest, .inner-featured {
	position:absolute;
	bottom:0;
	left:0;
	right:0;
	text-align:center
}

MicrostockGroup Sponsors

Author Topic: Aligning Thumbnails Vertically to Bottom (Read 3279 times)

ShazamImages

Kerioak~Christine

ShazamImages

Redneck

ShazamImages

cathyslife

ShazamImages

plrang

Leo Blanchette

ShazamImages

Related Topics

Sponsors

Microstock Poll Results

Sponsors