Vertical centering has always been awkward with css as vertical-align only refers to inline elements within a single line and not to block level elements. However vertical align does apply to table-cells also so we can use this to our advantage in browsers that support display:table such as mozilla and opera.

We can also cater for all IE (IE5 – IE7) via conditional comments and supply them with their own vertical centering routine.

Firstly I’ll describe what’s needed for mozilla. Here’s the main css code:

Code:

The html would look like this:

Html:

Most of the above should be familiar to you but the bit we are interested in is the display:table in #outer. This tells the browser to display this element with the same characteristics of a table which allows us to then use vertical-align:middle. We then nest an inner #container that is set to display:table-cell and this table-cell will then be vertically aligned to the parent as would a table cell.

The inner #inner element is then horizontally centered using margin:auto and that completes the solution for mozilla and Opera. It’s a shame that we need the extra wrappers but this is the safest way to do this. Unlike other vertical centering methods (where you position the element 50% from the top and then drag it back up with a negative top margin equal to half the elements height) the method I describe will always stay in the viewport and will not slide off the top or the side of the screen which is a bad failing of other methods used.

To bring IE into the game we need to do something else because it doesn’t understand display:table. Luckily we can draw on a behaviour that is consistent from ie5 – ie7 and simply involves positioning the outer element 50% from the top using relative positioning and the dragging the inner element back up with a negative 50% relative top position. In other browsers this would bring the element back to the same position but IE drags the inner element back only half its height therefore perfectly centering the element.

Code:

We also need to add overflow:hidden to the outer for IE7 otherwise we get a vertical scrollbar where its not needed.

Nothing else needs to be changed as IE7 and under doesn’t understand display:table and just ignores it. The html stays the same and the only extra css is the 2 lines above. It couldn’t really be much simpler.

One of the best things about WordPress is the thousands of plugins available for free. No matter how you want to customise your site, there’s probably a plugin to do it. From turning it into an ecommerce store to automatically pulling in content, the possibilities are endless.

When it comes to portfolio sites, you don’t really need a lot of bells and whistles. Your portfolio is all about your work and presenting it in the best possible way, so which WordPress plugins are the best to achieve this? Which will help your WordPress portfolio really perform?

Tweet This

Chances are you have a Twitter account, so what better way to show off your work than to put it in front of your followers? The Tweet This plugin installs a cool button on all of your posts and pages, allowing people to Tweet a link to your work. It can also be set up to Tweet new posts so you don’t have to sign up to a service like Twitterfeed.

Our favourite thing about this plugin is that it lets you shortern URLs using a service of your choice. If you’ve got your own URL shortener this is very nifty indeed.

Sociable

Fantastic for generating traffic spikes, Sociable lets you add social bookmarking links on your posts, pages and RSS feeds. Good art, design or photography is social networking gold, so this is definitely a plugin you want to install.

Xavins Review Ratings

It might be a bit old-school, but star ratings are great for visitor interaction. Our favourite plugin for this is Xavin’s Review Ratings. It’s entirely customisable from the number of stars to the size of the fractions to the design of the stars themselves. Intended mainly for review websites, we think it’s cool to let people review your work, so give this a try on your portfolio.

NextGen Gallery

Probably the most comprehensive image gallery plugin for WordPress, NextGen Gallery provides a huge set of options for displaying your images. From adding custom templates and multiple CSS stylesheets, to using watermarks and slideshows, it’s the only plugin you need for an instant, professional-looking gallery.

FlippingBook

Some people love them and some people hate them, but page-flip sites stand out from the crowd. If you want your portfolio in picture-book format, FlippingBook is the plugin for you. It lets you easily create an interactive Flash album complete with pages that, well, flip!

Smush.it

This neat little plugin is a FrogsThemes favourite, optimising your images in a ‘lossless’ way. As any web designer knows, saving bytes is a good thing. Your portfolio loads faster and there’s less stress on your bandwidth. Smush.it makes it easy for everyone to optimise their image file sizes – once installed, it optimises new images automagically!

WordPress Super Cache

This plugin also cuts down on your page load time by generating a static HTML file to serve to most of your users. It’s a lot quicker than serving normal WordPress php scripts and a really useful talent for image-heavy sites like your portfolio. If your work is popular on social media sites, WordPress Super Cache can help your site handle the resulting heavy traffic. Neat huh?

Audio Player 2.0

Want to add audio to your portfolio? Look no further than Audio Player 2.0. From autostart to autoloop, it has everything you need to make your portfolio literally speak to your visitors. The top advantage for portfolio sites? You can customise the colour scheme to blend in with your design.

WordPress Backup

Now you’ve installed all these plugins and your portfolio is ace, it’s time to make it safe and secure. Currently, the best plugin that backs up your WordPress portfolio is simply called WordPress Backup. It performs regular backups of your upload directory (i.e. images), your theme and your plugin directory. This takes care of a lot of your content, but unfortunately leaves out your database.

For that we recommend a newcomer – Online Backup for WordPress. This plugin comes with 50MiB of free space in a real life datacentre – your blog posts have never been so secure! We’ve been assured that in the coming months this plugin will backup images, plugins and other file-level items, so watch this space for an update.

if (b.ie)
{
var filter = this.element.style.filter.replace(/alphas*(s*opacitys*=s*[0-9.]{1,3})/, ”);
this.element.style.filter = filter + ‘alpha(opacity=’ + parseInt(ht * 100, 10) + ‘)’;
}
else
{
this.element.style.opacity = ht;
}
this.element.style.visibility = ‘visible’;
this.element.style.display = ‘block’
}