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
Vertically Centered ThumbsBut 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 150×150 px.
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 ^
ladygagz.
If you write a section for us, you will be credited!
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
here!
love 3
3
joy 0
0
wow 0
0
mad 0
0
sad 0
0
fear 0
0
neutral 0
0
Very useful.
`anmari has been spreading her infectious positivity throughout our community for over 6 years. Throughout this time Ana has been at the core of all things devious, passionately developing an eclectic gallery, helping organise devmeets, participating in chat events and also recently completed dedicating her time as a Community Volunteer. We are absolutely delighted to bestow the Deviousness Award for May 2013 to `anmari, congratulations! Read More
General Photography from 3wyl
Celebrating Deviousness December 2012
