Flexible height vertical centering with CSS, beyond IE7

How to center something both horizontally and vertically with modern browsers (apart from IE7 and older). The technique uses display:table but there is one thing to be aware of before implementing…

Create a vertically centred horizontal navigation

Centring block level elements is easy, just define a width and set margin:0 auto;, but what if you don’t know that fixed width? You could use text-align:center;, but that won’t work on 100%-width block-level elements either… that’ll only work on text-level elements.

Center Multiple DIVs with CSS

At some point, you may have a situation where you want to center multiple elements maybe <div> elements, or other block elements on a single line in a fixed-width area. Centering a single element in a fixed area is easy. Just add margin: auto and a fixed width to the element you want to center, […]

How to distribute elements horizontally using CSS

In this post I want to reply to a frequently asked question that I receive from my readers about how to distribute horizontally a certain number of elements within a main container using CSS. This problem is not particularly complex and can be solved simply using the CSS selector :first-child…

Horizontal and Vertical Centering Using CSS: A Beginner’s Guide

There comes a time in every web designer’s life, when you’re trying to center an HTML element and it’s failing miserably. You’re ready to pull the plug on CSS, revert back to tables, and use deprecated tags and attributes like: center, align, and valign. In this tutorial we’re going to shed some light on the […]

Aligning Images The Right Way Using CSS

Images are great for blog posts and chunks of text in general. Even if they’re just remotely relevant, they’ll add some space and make the content more accessible. You want to spice your texts up with images.You can position images however you like, of course, but a nice feature is to have the floating to […]

Vertical Centering With CSS

There are a few different ways to vertically centre objects with CSS, but it can be difficult to choose the right one. I’ll show you all the best ways I’ve seen and also how to create a nice little centered website. Vertical centering with CSS isn’t an easy thing to do. There are many different […]