MicrostockGroup Sponsors


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

0 Members and 1 Guest are viewing this topic.

ShazamImages

  • ShazamImages.com
« on: August 12, 2013, 13:09 »
0
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?


« Reply #1 on: August 12, 2013, 14:14 »
0
Yes, use Plrangs plug in so you get square thumbnails and they all align ?

ShazamImages

  • ShazamImages.com
« Reply #2 on: August 12, 2013, 14:38 »
0
Thanks.

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

« Reply #3 on: August 12, 2013, 14:55 »
0
Try adding this to your child theme CSS.

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

ShazamImages

  • ShazamImages.com
« Reply #4 on: August 12, 2013, 15:02 »
0
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?

« Reply #5 on: August 12, 2013, 17:53 »
0
Try this:

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

ShazamImages

  • ShazamImages.com
« Reply #6 on: August 12, 2013, 19:02 »
0
Try this:

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

Thanks, but that didn't work either.

Anyone else?

« Reply #7 on: August 12, 2013, 19:59 »
0
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)
« Last Edit: August 12, 2013, 20:10 by plrang »

Leo Blanchette

« Reply #8 on: August 12, 2013, 20:46 »
0
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

  • ShazamImages.com
« Reply #9 on: August 13, 2013, 05:25 »
0
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
}


 

Related Topics

  Subject / Started by Replies Last post
19 Replies
6960 Views
Last post December 01, 2006, 16:39
by madelaide
1 Replies
2914 Views
Last post February 27, 2007, 03:30
by leaf
90 Replies
31349 Views
Last post April 05, 2011, 18:51
by lbarn
10 Replies
8301 Views
Last post September 28, 2011, 01:19
by RacePhoto
2 Replies
4066 Views
Last post July 13, 2013, 05:00
by Pauws99

Sponsors

Mega Bundle of 5,900+ Professional Lightroom Presets

Microstock Poll Results

Sponsors