Shop More Submit  Join Login
×

:iconbradleysays: More from bradleysays


Featured in Collections

DACelebs by MisDmeanor

Journals by cinyu


More from deviantART



Details

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

Stats

Views
8,568 (1 today)
Favourites
86 (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
Add a Comment: