Shop Mobile More Submit  Join Login
×

:iconbradleysays: More from bradleysays


Featured in Collections

DACelebs by MisDmeanor

css tutorials by MelikeBAt


More from DeviantArt



Details

Submitted on
November 27, 2012
Submitted with
Sta.sh Writer
Link
Thumb

Stats

Views
8,886
Favourites
88 (who?)
Comments
36
×

CSS Did You Know? - November 28th, 2012

Journal Entry: Tue Nov 27, 2012, 10:22 PM
:iconpica-ae:
Vertically Aligning Thumbs

When you add thumbs to a journal, they are vertically aligned to the bottom of the text by default. This is also called aligned to the baseline, the invisible line on which all CAPITAL LETTERS end on. This can make an otherwise beautiful journal with lots of thumbs look awkward sometimes.

Examples


Regular Thumbs

Creepy Neighbourhood by pica-ae Speedpaint: Flatland Castle by the River by pica-ae Let It Go by pica-ae

Vertically Centered Thumbs

Creepy Neighbourhood by pica-ae Speedpaint: Flatland Castle by the River by pica-ae Let It Go by pica-ae


But there is an really easy way to, one line of code, that can help you clean up your feature:

.shadow img {
vertical-align: middle;
}


If you want to understand this line of code, it helps to know how thumbs in journal are built up. Two elements that contain thumbs are the .shadow and the img element. In this trick, the img is the automatically generated thumb image of a deviation, which is then centered inside the .shadow of 150150 px.


:iconbradleysays:
What would you like to know?

CSS will be difficult when you're unfamiliar to it. So that's why we're writing these articles! If you have any suggestions or would like to write a section in future CSS Did You Know? articles, please note bradleysays.

If you write a section for us, you will be credited! :)

:iconexcitedlaplz:
Previous editions

Want to learn more about CSS and how to use it? We've collated all of our previous articles and put them into one document for your convenience.

Read the CSS Did You Know? archive :pointr: here!




CSS Did You Know? is an article series that gives you tips and lessons on CSS. This edition includes vertically aligning thumbnails.
Add a Comment:
 
:icon01309:
01309 Featured By Owner Oct 8, 2013  Hobbyist Writer
Stash has a 404
Reply
:iconwdwparksgal:
WDWParksGal Featured By Owner Nov 30, 2012
I ended up putting the code at the end of my CSS, and it worked for the features I put on my most recent journal. Thanks for the tip!
Reply
:iconmiontre:
miontre Featured By Owner Nov 30, 2012  Hobbyist Photographer
Just to answer your question - it does not matter where you place the code. :dummy:
Reply
:iconwdwparksgal:
WDWParksGal Featured By Owner Dec 1, 2012
Thanks. I placed the code at the end of the CSS code and it worked because the thumbs look like the sample!
Reply
:iconwdwparksgal:
WDWParksGal Featured By Owner Nov 29, 2012
Good to know! Is there a specific place in the CSS that I should insert the line of code?
Reply
:iconhectoradame:
HectorAdame Featured By Owner Nov 29, 2012  Hobbyist Digital Artist
What is CSS? Is it a program?
Reply
:iconmiontre:
miontre Featured By Owner Nov 30, 2012  Hobbyist Photographer
It is a coding language used to style web pages. :)
Reply
:iconhectoradame:
HectorAdame Featured By Owner Nov 30, 2012  Hobbyist Digital Artist
Ow... thanks!
Reply
:iconhendriono:
hendriono Featured By Owner Nov 29, 2012  Hobbyist Interface Designer
simple but very useful... thanks...
Reply
:iconsimplysilent:
SimplySilent Featured By Owner Nov 28, 2012
Wow, such a simple solution to a problem that so many face! Thank you for this great article ^^
Reply
:iconicexdragon:
IceXDragon Featured By Owner Nov 28, 2012  Hobbyist General Artist
Ohh, interesting!:D Very useful.:D
Reply
:iconthiefoworld:
Thiefoworld Featured By Owner Nov 28, 2012
A very simple and useful trick! Thanks Anne! :D
Reply
:iconkovowolf:
KovoWolf Featured By Owner Nov 28, 2012  Professional General Artist
Most helpful!!
Reply
:iconpiratelotus-stock:
PirateLotus-Stock Featured By Owner Nov 28, 2012
TELL ME ALL THE THINGS
Reply
:iconsingingflames:
SingingFlames Featured By Owner Nov 28, 2012  Hobbyist Writer
Very helpful! Thanks! :D
Reply
:iconthegalleryofeve:
TheGalleryOfEve Featured By Owner Nov 28, 2012  Hobbyist Digital Artist
I'm a complete IGNORANT of CSS :giggle: ... But I've seen those lovely galleries with skins that I'm crazy about!!! :facepalm: ... And I'd just LLLLOVE to design one for my gallery :love: ... What would you suggest me to read first? :confused: ... Which tutorials would you recommend for someone like me to read? ... I'm thanking you in advanced :tighthug:
Reply
:iconshoofly-stock:
Shoofly-Stock Featured By Owner Nov 28, 2012  Professional Digital Artist
Check my collection of CSS tutorials and other goodies - you will find everything you need ;) [link]
Reply
:iconthegalleryofeve:
TheGalleryOfEve Featured By Owner Nov 28, 2012  Hobbyist Digital Artist
Ohh, thank you so much! :tighthug:
Reply
:iconjamminjo:
JamminJo Featured By Owner Nov 28, 2012  Hobbyist Photographer
I have a question :la:

Where do we add the code to align the thumbs vertically?

I have been reading tutorials on and off for several months trying to understand CSS :confused:
Reply
:iconbradleysays:
bradleysays Featured By Owner Nov 28, 2012
Click 'Edit Skin' and then paste it into the 'Skin CSS' field. :D

Good luck! :hug:
Reply
:iconjamminjo:
JamminJo Featured By Owner Nov 28, 2012  Hobbyist Photographer
Awesome :heart:

Thank you :tighthug:
Reply
:iconpica-ae:
pica-ae Featured By Owner Nov 28, 2012  Professional Interface Designer
you didn't have to take those thumbs for the example :paranoid: ;)
Reply
:iconbradleysays:
bradleysays Featured By Owner Nov 28, 2012
Yes I did. :icongrinstareplz:
Reply
:iconpica-ae:
pica-ae Featured By Owner Dec 16, 2012  Professional Interface Designer
:iconeye-plz:
Reply
:iconhyenacub:
hyenacub Featured By Owner Nov 27, 2012  Hobbyist
Ooooo I like this! : D
Reply
:iconstamatisgr:
StamatisGR Featured By Owner Nov 27, 2012   Photographer
good one!
Reply
:iconcrickatoo:
Crickatoo Featured By Owner Nov 27, 2012  Student Digital Artist
:thumbsup: That's one I never knew about! Thank you :D
Reply
:iconbradleysays:
bradleysays Featured By Owner Nov 27, 2012
Glad you learned something! :la:
Reply
:iconpixiepot:
pixiepot Featured By Owner Nov 27, 2012  Student General Artist
That's pretty useful, thank you. :love: I hate it when you have thumbs that are taller than the others, they stick out lick a sore thumb. However, being able to vertically centre them should help make it less note able.

Thanks for the great tip, ^ladygagz! :huggle:
Reply
:iconbradleysays:
bradleysays Featured By Owner Nov 27, 2012
"they stick out lick a sore thumb."
I see what you did there. :iconjuap:

No problem, full thank yous should go to ^pica-ae. <3
Reply
:iconpixiepot:
pixiepot Featured By Owner Nov 27, 2012  Student General Artist
:lol: No, that was just a typo. :lmao:

:love:
Reply
:iconcrickatoo:
Crickatoo Featured By Owner Nov 27, 2012  Student Digital Artist
like a sore *thumb* :giggle:
Reply
:iconpixiepot:
pixiepot Featured By Owner Nov 27, 2012  Student General Artist
:giggle: Sorry, typo.
Reply
:iconcrickatoo:
Crickatoo Featured By Owner Nov 28, 2012  Student Digital Artist
Oh no, not a typo :XD:. I was giggling at the pun!
Reply
:iconpixiepot:
pixiepot Featured By Owner Nov 28, 2012  Student General Artist
Yeah, I know. :lol: But it was a mistake! XD
Reply
Add a Comment: