Vertically aligning elements

For a long time I’ve always been using the following method of vertically aligning elements on a web page:

.parent{
display: table;
width: 100%;
}
.child{
display: table-cell;
text-align: center;
vertical-align: middle;
}

This method works good across all browsers and includes solid IE support down to IE7. The downfall of this particular method is that it requires two html elements in order for it to work (a parent and a child).

Using CSS3 transforms property, we can now vertically align elements with just 3 lines of css:

.element {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

Transforming the element on the Y axis with a negative 50% of the height the element is currently contained in will pull it up half way (more than likely outside the parents width and height).

transformy

Now if we add a top: 50% it will pull the element back down directly in the center of whatever parent container the element is sitting inside of.

top50

One thing you didn’t know about WordPress images.

By default in WordPress when you server up a .JPEG file, WordPress optimizes the image to save bandwidth and space. 90% of the time, no one will realize this as the WordPress function behind image optimization does a fantastic job at keeping it’s quality the same, unless you are using very large high quality photo .jpeg files.

By default WordPress uses a default quality of 90%, if you wish to revert the image quality throw the following function in your functions.php file:

add_filter( 'jpeg_quality', 'smashing_jpeg_quality' );
function smashing_jpeg_quality() {
return 100;
}

Personal inspiration for September

Just leaving this here for now…

Design is not just what it looks like and feels like. Design is how it works.

“Most people make the mistake of thinking design is what it looks like. People think it’s this veneer – that the designers are handed this box and told, ‘Make it look good!’ That’s not what we think design is. It’s not just what it looks like and feels like. Design is how it works.”

- Steve Jobs