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?

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

Thanks.

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

Try adding this to your child theme CSS.

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

Quote from: Redneck on August 12, 2013, 20: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?

Try this:

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


Quote from: cathyslife stockphotos.com on August 12, 2013, 23:53
Try this:

Code Select Expand

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


Thanks, but that didn't work either.

Anyone else?



.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)

Quote from: plrang on August 13, 2013, 01:59

Code Select Expand



.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.

Quote from: plrang on August 13, 2013, 01:59

Code Select Expand



.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:

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

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