When the sites (and CSS) align

As the agency of choice for our clients, we pride ourselves on being experts in our respective fields. To have a great website, we need to take all of our individual strengths (graphic design, content, functionality and user experience, to name just a few) and put them together into one spectacular site with a seamless and attractive layout.

When it comes to the style and layout of a website, using cascading style sheets (CSS) has proven to be tremendously successful, but like all tools, CSS isn’t perfect. While CSS is very good at laying objects out horizontally, understanding how vertical alignment and heights operate can create a lot of problems for some developers.

One common question that can be tough to tackle is how to center an object vertically with CSS. For some reason the CSS specification is very strange with vertical centering, which is much harder to achieve than it should be. While there are a few different ways around the problem, there is one particularly good trick I use to meet our clients’ layout needs.

Now for a bit of code talk: the way to center something vertically in a cross-browser compliant way is to wrap your object in a div and set its display to table-cell like this:

.wrapperDivClas

{

display:table-cell;

}

Then on the child (the content that you want to center vertically), add the following vertical align command:

#childId

{

display:block;

vertical-align:middle;

}

By tricking the styles into working like a table, the standard vertical alignment commands work properly and allow us to achieve our desired goal — an easy-to-navigate website that achieves our client’s business goals.

Contact Us