Horizontal and Vertical Centering Using CSS_ a Beginner’s Guide _ Noobcube

6/18/2014 Horizontal and Vertical Centering Using CSS: A Beginners Guide | Noobcube

http://www.noobcube.com/tutorials/html-css/horizontal-and-vertical-centering-using-css-a-beginners-guide-/ 1/18

Upcoming Posts

1. Site From Scratch: Localmost (Part 3, Interaction) Tutorials > jQuery

2. Site From Scratch: Localmost (Part 2, HTML & CSS) Tutorials > HTML & CSS

Upcoming Posts

Noobcube - Web Design Tutorials, Resources, & Trends

Another how the heck you do that resource.

Home

Tutorials

Resources

Freebies

Quick Tips

Archives

Contact Us

Search

1. Tutorials

HTML & CSS

jQuery

Interface Design

2. Aug27

Horizontal and Vertical Centering Using CSS: A Beginners Guide

By: Jarod Taylor | Category: HTML & CSS

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: , align, and valign. In this tutorial we're going to shed some light on the subject,

and hopefully help demystify the process of centering HTML elements using CSS.

Introduction

Back in 'nam, when we wanted to center an element horizontally, we used the align attribute or the deprecated tag. In order to align elements

vertically, we would use the valign attribute. Those days are long and gone. We are using much cleaner and semantic methods of marking up our HTML

documents now. We're using that beautiful acronym known as CSS.

The first bulk of the tutorial is going to be discussing methods of centering elements horizontally. While horizontal alignment tends to be an easier task to accomplish

(in comparison to vertically aligning HTML elements), at times, it can still challenge even the most seasoned front end developer.

After turning your brain to mush and playing with horizontal alignment, we'll dive into the different options used today in vertically aligning HTML elements.

Tutorial Navigation

1. Inline vs. Block

2. Horizontally centering inline-level elements

3. Horizontally centering block-level elements

4. Horizontally centering block-level elements with an unknown width

5. Horizontally centering absolute positioned elements

6. Getting started with vertical alignment7. Vertically aligning inline elements with inline elements

8. Vertically center an element using absolute positioning

9. Vertically center an element using a "Shimmy Float"

10. Vertically center an element with and unknown height

11. Vertically and horizontally center an element using a table container



Inline vs. Block

In order to fully understand and maximize the abilities of CSS, one must first understand the difference between block-level and inline-level elements. Rather than

regurgitate what has been explained numerous times before, I'm going to briefly describe the difference between a block-level element and an inline-element.

Block Elements

Block-level elements are treated as rectangular (block) objects, which will take up 100% of the width available (unless its given a specific width declaration), andwill insert a line break before and after it. Block elements can have margins, width, and height settings.

Block elements include common tags such as:

, , , , , and

, ,

, ,

While this isn't a complete list of block elements, it gives you and idea of some common elements that are block-level. For a more comprehensive list of block-level

elements try the trustee Wikipedia.

Noobnote:

While block-level elements automatically take up 100% of their parent's width (if a width has not been declared), a table element will not stretch the width of itsparent, it will only take up as much width as it needs; similar to an inline-level element. Take a look at this example.

Inline Elements

Inline-level elements are treated as part of the flow of document text, so it will not insert a line break before and after it, and only takes up the width it requires.Inline elements cannot have margins, width, or height settings.

Inline elements include common tags such as:

While this isn't a complete list of inline elements, it gives you and idea of some common elements that are inline-level. For a more comprehensive list of inlineelements try the trustee Wikipedia.

Demo

Can block-level elements be inline-level elements?

Just because an element's natural state is inline or block doesn't mean they have to be used that way. That's what the display: value property is for.

div { display: inline;}

span { display: block;}

We just changed the block-level to an inline-level element by declaring display: inline, and we changed the inline-level element to a block-

level element by declaring display: block.

More Block vs. Inline Resources

Web Design From Scratch: Block vs. InlineWorldtechies: Block vs. Inline Level Elements

Autistic Cuckoo: Block vs. Inline, Part 1





So, what are you trying to say Jarod?

The difference between a block-level element and an inline-level element can pretty much be summed up in one sentence: block-level elements begin on a new

line and create a line break afterward, and inline-level elements do not.

So, what's this have to do with centering HTML elements? How to center an element, using CSS, depends entirely on whether or not it is an inline element or a

block element. Different methods of centering are used for each type of element. That's what we'll explore next.

Horizontally centering Inline-Level elements

Chances are, you've already centered text before using the text-align property, but this property, in fact, will center all inline-level elements. The way thisworks is by giving the inline-level element's parent block-level element the declaration of text-align: center.

Noobnote:

For the sake of brevity, during the rest of this tutorial, I will refer to block-level elements as block elements and inline-level elements as inline elements.

Let's look at some examples here. We need a block element containing an inline element (eg. an anchor inside of a div). Let's use a couple different inline elementsinside separate block elements. We'll use a div as the parent block element and a , and an for our inline elements.

HTML

I'm a pretty inline-level span tag

I'm a pretty inline-level anchor tag

We have 3 separate block elements containing 1 inline element each. Now we need to add some CSS to demonstrate how to center an inline element.

First thing we need to do is give our parent block element (div) a style declaration of text-align: center.

CSS

div { text-align: center; background: #efefef; margin-bottom: 10px;}

a, img, span { border: 1px solid #3d3d3d; }

The reason our div is getting text-align: center is because the text-align property doesn't actually effect the alignment of the element itself (in this case: thediv); it effects the alignment of its inline-level contents.

Noobnote:

If we put text-align: center on one of the inline elements, nothing would happen. Technically, it would be centering the content inside the inline element, but

the inline element's width is only as wide as it needs to be, so you're not going to see a difference.

The other styles we added were for display purposes. They're not required for this demonstration, but it makes it a little easier to see what element is what. This is

what we get with these styles applied to our demo.

As you can see, our block element divs have a light gray background and take up 100% of its parent element's width (in our case the 's width). The inline-

level content is centered inside of each block element. I've applied a border to our inline elements to show where they begin and end.

What if we change our inline-level elements to block-level elements?

Let's give it a try. First, we need to remove our divs from the document.

HTML

I'm some inline text inside of an inline-level span that's been changed with display: block

I'm some inline text inside of an inline-level anchor that's been changed with display: block

Now we've removed all block elements from our HTML and are left with 3 inline elements.

What we need to do next is move all of our div styles to our a, img, span styles.

CSS



a, img, span { text-align: center; background: #efefef; margin-bottom: 10px; border: 1px solid #3d3d3d; display: block;}

We've moved our div styles to our inline element styles, and also changed their display property to display: block.

Noobnote:

When you change an element's natural display property, using CSS (eg. declaring display: block; on a span element), you're technically only telling the

browser to treat it as a block-level element. As far as the HTML is concerned, it is still an inline-element.

Take a look at what we have with our new changes. You'll see that our once inline-level elements are now being treated as block elements. Remember though, wearen't centering the actual , , and elements; we're centering their content. In the cases of the and elements, the content is text. Text

is naturally an inline-level element, and cannot be changed, therefore they're being centered within their respective block-level containers ( and ).

Why didn't the center with the other elements?

You might be asking, "why didn't the image center?". This can be confusing at first, but keep in mind, that the image tag doesn't contain anything other than itself.Remember: we aren't centering the element with text-align: center, we're centering its contents.

Noobnote:

The text-align property is an inherited value. This means, if you declare body { text-align: center; }, all the body element's children that are inline-level

will also be centered, unless you declare it specifically, otherwise.

Horizontally Centering Block-Level Elements

As opposed to centering inline elements, centering block elements is done by actually applying CSS rules to the element you're actually wanting centered. This is

done by using the margin property. By giving our block element a left and right margin value of auto, it's essentially creating equal left and right margins, thereforecentering the element.

Let's look back at our last demo, and make a few changes to our newly converted block-level elements. Let's start with just centering the span element.

I've highlighted the additions to our CSS.


span { margin-right: auto; margin-left: auto;}

If you take a look at our page, you'll see nothing has changed. This is because our span element doesn't have a width declaration. When a block-level element

doesn't have a width declared, it's default value is auto. If a block element has the width value of auto, it will take up 100% of the width of its parent element. In

this case, our span element's parent is the body element.

Noobnote:

In our newly added styles for our span element, you'll notice that I have two separate style declarations for the margin-right and margin-left properties. It's

common practice to use CSS shorthand, to make our stylesheets more efficient. Rather than using two separate style declarations like we did above, we could do it

this way: margin: 0 auto 10px auto, or even shorter because our left and right values are the same, margin: 0 auto 10px.

Let's give our span element a width and change its margins to use CSS shorthand.

span { margin: 0 auto 10px; width: 800px;}

You'll now see our span element is centered inside the browser.

Let's go ahead and center our anchor element now as well.


span { margin: 0 auto 10px; width: 800px;}

a { margin: 0 auto 10px; width: 70%;



}

The only difference with our a element styles and the span element is the width value was declared using a percentage instead of a pixel dimension. If you take a

look at our demo you'll see the anchor element is now centered.

Centering our img element is little different. Images have what are called intrinsic dimensions, basically meaning that the browser already knows the dimensions of

the image, therefore, it doesn't need a width explicitly declared. All we need to do is add the auto margins to our img styles.

img { margin: 0 auto 10px;}

You'll now see our image is centered.

Noobnote:

Just because we don't have to declare a width for our img element, it still needs to be a block-level element for it to accept the margin property values. You can'tjust put auto margins on an image and expect it to center. You have to first convert it to a block element with display: block.

That's pretty much it! Now keep in mind, in order for Internet Explorer 6 and 7 to handle the auto margins correctly, you must be running in standards compliance

mode and not in Quirks Mode.

This is all pretty simple and easy to understand, but what happens when we don't know the width of our block-level element we want to center? This is what we'll

be tackling next.

Horizontally Centering Block-Level Elements with an Unknown Width

There are rare occasions when you're wanting to center a block-level element, where the width of the element is unknown. This is especially more common whenyou're receiving content dynamically.

Let's create 3 elements as our block-level elements. We'll put a little text in each, incrementally, making each one longer than the one before.

HTML

I'm a block-level paragraph taking up as much width as I can.

I'm a block-level paragraph taking up as much width as I can. I'm a little bit longer than the one above.

I'm a block-level paragraph taking up as much width as I can. I'm a little bit longer than the one above, but much longer than the first one.

Nothing exciting here, just some paragraph tags with some basic text as its content. What we need to do is give our p elements some styles to make it easier to

identify each of them. Let's start with some basic styles.

CSS

p { background: #ccc; padding: 5px; border: 1px solid #000;}

It's pretty self explanatory what we've done here. We gave each of our p elements a background color and border to help distinguish each of them. We also gaveeach of them a padding to give the text some space.

If you remember, from the previous section, an img element does not need to have a width declared in order for margin: 0 auto to work. It only needs to be

converted to a block-level element so it will be able to have margin property values. I also explained briefly, in the block vs. inline section of this tutorial, that thetable element was the only block-level element that did not take up 100% of its parent element width. It, much like the inline-level element, will only take up as

much width as it needs. The reason I bring this up is because CSS has another property worth looking at, display: table. If we declare our display property

value as table on our p elements, they will be treated as a block-level table element.

This means two things:

1. The table element will only take up as much width as it needs. So there's no need to declare a width for it.

2. It's still treated as a block-level element, therefore it will still render the margin property.

Let's go ahead and add some styles to our CSS. I've highlighted the changes.

p { background: #ccc; padding: 5px; border: 1px solid #000; display: table; margin: 10px auto;}

We did a couple things here. We first added the display: table declaration to get our p elements to render as table elements. We also gave our elements

some breathing room by giving it a 10px bottom and top margin, while also centering them using the auto value for our right and left margins. Take a look at what

we get.

Depending on the browser you're using, you will probably get mixed results. The majority of your modern browsers support the display: table property, while

a handful of others do not (*cough* Internet Explorer *cough*). It's true, our favorite web browser has chosen to rain on our parade, yet again. Unfortunately, IE7

and below do not support this display value. On a positive note, Internet Explorer 8 does. But, unfortunately, we'll be developing for IE7 for years to come, so this

is a big "unfortunately". Fortunately, and I use that term loosely, there is a workaround to make this work in Internet Explorer 7 and 6.

Getting IE6 and IE7 to behave

Because IE7 and below do not support display: table, we need to do some dirty work. We will try and make this as clean as possible, but unfortunately, due



to the lack of CSS rendering of these 2 browsers, we'll have to use some solecistic arbitrary markup.

First thing's first, what can we use to get our p elements to only be as wide as they need to be, like table elements and inline-level elements? Well, just like we can

convert inline elements to block elements, we can convert block elements to inline elements with display: inline and create a container to hold the p elementsand give it a text-align value of center. Let's start with the additional HTML. I've highlighted the changes.

HTML

I'm a block-level paragraph taking up as much width as I can. I do not have a width declaration.

I'm a block-level paragraph taking up as much width as I can. I'm a little bit longer than the one above. I too, do not have a width declaration.

I'm a block-level paragraph taking up as much width as I can. I'm a little bit longer than the one above, but much longer than the first one. I do not have a width declaration.

We've wrapped our p elements in a block-level div, so that we can give it a style declaration of text-align: center in order to center all inline-level elements

inside of it.

We need to add some new styles to our CSS in order to get IE6/IE7 to pretend to be good browser. Let's put these styles below our other styles inside conditional

comments.

CSS

Let's take a look at our page in Internet Explorer now. It's getting closer, but there are some things to work on. First of all, because our p elements are now beingtreated as inline elements, we need to put in tags after each p element.

I'm a block-level paragraph taking up as much width as I can. I do not have a width declaration.

I'm a block-level paragraph taking up as much width as I can. I'm a little bit longer than the one above. I too, do not have a width declaration.

I'm a block-level paragraph taking up as much width as I can. I'm a little bit longer than the one above, but much longer than the first one. I do not have a width declaration.

Now that we've added break tags after our paragraph elements, it's rendering much better in IE, but there's still some work needed. You'll notice something funky

is happening with our p elements. They're crowding each other and missing parts of their border. This is caused by IE's proprietary pain in the ass, hasLayout.Because we're putting our styles inside of conditional comments, I'm choosing to use zoom: 1 to gain hasLayout in IE.

Voila! If you take a look at our page in IE6/IE7 now, you'll see our elements centering and handling just like they should.

Now, for the cleanup. Yes, we now need to do a little cleanup. If you were to look at our page in a "good" browser, like Firefox, you'll see that the tagshave added more space than needed between our paragraph elements. It's a quick and easy way to cleanup. We need to just display the tags to IE7 and

below, so we'll set our CSS to display: none on br elements and then display: inline to IE7 and below.

We now have a a page demonstrating how to center block-level elements without declaring a width.

Horizontally Centering Absolute Positioned Elements

Centering an element that has position: absolute declared is quite simple if there's a width declared.

Let's create a simple div with a fixed width, absolute positioning, and some basic styles for appearance. We'll start with the HTML.

HTML

I'm a horizontally centered div that's absolutely positioned in the browser.

CSS

div{ width: 600px; position: absolute; left: 50%; margin-left: -300px; background: #CCC; }

What we've done is given our div element a width of 600px and a position: absolute declaration. We gave it a background color just to show the 600pxelement. What's important here is the left and margin-left values. We've set our left value to 50% which moved our element over 50% from the left. We

then take half of the element size and put a negative margin-left value equal to that. In our case, half of 600px is 300px. Take a look at what it renders.

Getting Started with Vertical Alignment

Unlike horizontal centering, vertical centering can be a nightmare. There a few different methods of vertically centering content in HTML, but all methods have theirpros, cons, and browser inconsistencies. We're going to touch base on the most common ways of achieving vertical centering.

Noobnote:

Looking to just vertically align one line of text? Try this simple method:

Give your block element a height and line-height equal to one another. This will vertically align the text in its container. Beware, if the line wraps, it will fail miserably.

Use this with caution. Here's an example.

Vertically Aligning Inline Elements with Inline Elements

Taking inline elements and aligning them is quite easy with the CSS vertical-align property. Much like the old school table days, vertical-align accepts

a number of values. Chris Coyier does a pretty good job explaining the differences in the values here, so rather than repeating what's been said before, I'm just

going to briefly run an example by you.

Take some inline level elements and apply vertical-align: middle to them and you'll see a little magic.

HTML

This is some text with an image dropped inside of it inline and centered in the middle

Important link with an icon

WORDWORD

CSS

img, span, a { vertical-align: middle; border: 1px solid #000;}

.sixty { font: bold 60px Arial, Helvetica, sans-serif;}

.thirty { font: bold 30px Arial, Helvetica, sans-serif;}

I added some basic styles to better distinguish the different elements, but the important property here is the vertical-align style declaration. Take a look at our

example.

Vertically Center an Element Using Absolute Positioning

Much like we did to center an absolute positioned element horizontally, we can do to center it vertically, as well. Let's take a look at our example from the

Horizontally centering absolute positioned elements section of this tutorial.

Let's give it a height of 600px as well as a top value of 50%. Just like we did to horizontally center it, we'll give the element a negative margin-top value.

div{ width: 600px;



height: 600px; position: absolute; left: 50%; top: 50%; margin: -300px 0 0 -300px; background: #CCC; }

As expected, we have a vertically and horizontally centered element.

Vertically Center an Element Using a "Shimmy Float"

Okay, so "shimmy float" is a silly name I call this technique, I learned from Douglas Heriot's tutorial. In carpentry, small pieces of wood are used as shims to align

gaps between larger pieces of wood. When using the "shimmy float" technique, we're going to use an arbitrary div as sort of a shim to center the content below it.

Much like the position: absolute method, this technique depends on its centered element having a fixed height. Let's start with a container div and somebasic styles.

HTML

Hi, I'm a div. I want to be vertically centered.

CSS

#container { height: 500px; background: #3d3d3d; color: #efefef;}

Alright, we have a starting point.

Now we need to create an empty div above our container div to act as our shim.

Hi, I'm a div. I want to be vertically centered.

This div needs to float: left and have a height of 50%. There's something that needs to be done before our shim element will understand height: 50%. We

need to give our html and body element a height of 100%.

At the top of our CSS we need to add the following styles:

html, body { height: 100%; padding: 0; margin: 0;}

This will allow us to give any element in our document a height using a percentage rather than a fixed pixel dimension. We also zeroed out the body's margin and

padding properties, or else we'd end up with a vertical scrollbar in our browser.

Now for the shim styles:

#shim { float: left; height: 50%; margin-bottom: -250px; width: 1%;}

We've floated our shim left and given it its height of 50%. We also gave it its negative bottom margin of 250px which is half the height of the container div we're

trying to center. The width: 1% is necessary for IE to render our shim, otherwise it acts as if it doesn't exist.

That's it! Take a look at the example, and you'll see the container div is vertically centered in the browser.

Vertically Center an Element with an Unknown Height

Yes, we're breaking out display: table again, and this time bringing its counterpart display: table-cell. Let's jump right in and get our HTML done first.

Hi, I'm some content

We have ourselves a small bowl of div soup here, but it's necessary in order for this to work properly. If you remember, from the beginning of this tutorial, when

using display: table, we can use the CSS property vertical-align. That's exactly what we're going to do with the element.

First thing's first, our needs to be givin' 100% height so that our will vertically align to the middle of the browser window.

Remember, in order to give our element's a height of 100%, we need to give our html and body elements 100% height. In this example, we're going to horizontallycenter the element inside the element, therefore we need to give our element 100% width too,

so that it stretches the width of the browser.



Here's what we end up with:

CSS

html, body { height: 100%; padding: 0; margin: 0;}

#table { display: table; height: 100%; width: 100%;}

#cell { display: table-cell; vertical-align: middle;}

#content { width: 960px; background: #3d3d3d; margin: 0 auto;}

Take a look at our example. Once again, if you're viewing this in IE7 or below, you're not seeing what you want to be seeing right now. As we already discussed,IE7 and below do not support display: table, nor display: table-cell.

Getting IE7 and IE6 to Behave

Guess what we need to create again? Yep, we need a div which we'll call "ie-container", and add some conditional styles to help it do what it needs to do.

I've highlighted the addition to our HTML.

HTML

This is content

Our new div (ie-container) is going to need some styles, but again, this is only needed for IE7 or below so we'll use some conditional comments. Put this below

your tag.

We've given our new ie-container div a relative position and a top margin of 50%, moving it and its contents down 50%. We then exploit an IE bug that goesback to version 5, by giving our element a relative positioning and giving it a negative top margin equal to its containing elements positive

top margin (-50%). All other browsers would just move the content right back up to where it was before, but IE7 and below will only move it up half way,

therefore, centering it! It's a shame we have to go through these lengths to get IE to cooperate, but it's nice to exploit its flaws from time to time.

Let's take a look at our page in IE now. You should now see our content vertically centered without declaring a height on it. To test it, simply put more paragraphsinside the content div and you'll see.

Vertically and Horizontally Center an Element Using a Table Container

I know in today's web design world, we cringe at the thought of using tables. The reality is, CSS is here to make our lives easier, not to completely replace HTML

tables. So, let's open our minds a little bit and let our old friend in.

HTML

Hi, I'm some content. ASL?



All we have here is a classic table element containing our . Now let's look at the flexibility we have with this method.

Let's vertically center our container div

This is done quite easily without any need for conditional hacks for IE. This will work in ALL BROWSERS. First thing we need to do is give our html and body

element a 100% height so that our table will be able to stretch the height of our browser window. Let's also go ahead and reset the page's padding and margins to

zero. Then we'll use vertical-align: middle on our table with a height of 100% height. This will now align the table's contents () inthe middle of the browser. We'll give our div container some styles to make it a bit prettier.

CSS

* { padding: 0; margin: 0;}

html, body { height: 100%; }

table { vertical-align: middle; height: 100%;}

#container { background: #CCC; border: 1px solid #000;}

Let's take a look at what we have so far. Not bad, we have a small little div vertically centered in the browser, and it's working in IE too. Now, here comes the fun

stuff. What do we want to do? Do we want a fixed height and width div vertically and horizontally centered in our browser? Or, should we have it vertically and

horizontally center without giving it a width OR height? Oh.. the possibilities.

Vertically and Horizontally Centered (Fixed Height & Width)

Alright, let's say we want our div container to have a fixed height and width, be centered horizontally and vertically in the browser, and have an overflow: auto if

the content grows longer than the height. First thing's first, we need to give our table element a width of 100% to stretch the width of the browser. If you remember,

the table element is the only block-level element that doesn't take up 100% of its containing element width. It only takes up as much as it needs. In order for ourfixed width div container to center with margin: 0 auto, we need its parent element (table) to stretch the width of the browser. I've highlighted the CSS

additions.



table { vertical-align: middle; height: 100%; width: 100%;}#container { background: #CCC; border: 1px solid #000; height: 600px; width: 800px; margin: 0 auto; overflow: auto;}

We gave our table element a width of 100%. We gave our div container a width of 800px and centered it using margin: 0 auto. We also gave our container div

a height of 600px, with an overflow value of auto. This will cause a vertical scrollbar, should the content grow more than 600px. Let's just add some more content

to our div to force a vertical scrollbar and see what we get.

Vertically and Horizontally Centered (Unknown Width & Height)

But, what if we don't know the width OR height of the content? You'd think this would be impossible, but it's actually a LOT easier than you think. First thing we

need to do is remove all the styles we just added to create the fixed width and height centered div. Remember in the beginning of the tutorial when we talked about

table elements and how they're the only block-level element that doesn't stretch 100% the width of its containing element? What this means is, our table can

understand margin: 0 auto without any width declaration.



table { vertical-align: middle; height: 100%; margin: 0 auto;



}

#container { background: #CCC; border: 1px solid #000;}

Take a look for yourself. How easy was that? The best part is, it works in ALL your major browsers, including IE6.

So, it's up to you. Are you going to throw tables in the trash completely?

Final Thoughts

As you can see there a number of ways to center elements in HTML, both vertically, and horizontally. Which one you choose to use will depend entirely on what it

is you're trying to achieve. Are there any methods that I missed, that you use? Let me know and I'll add them to the tutorial, giving you full credit.

Thanks again for reading!

No related posts.

Tags: Beginner, Centering, CSS

About the author

I love web design and development. It's what I do before bed, and what I can't wait to do when I wake up. So, what do I do when I'm not designing, coding, or

dreaming about designing and coding? Well, I'm a music connoisseur, a daddy, a husband, a writer, a joker, and a friend.

Jarod Taylor

No related posts.

Enjoy this post?

If you enjoyed this post, please take a second to retweet it, or share it via the various social bookmarking sites below. Don't forget to subscribe to the RSS Feed. If you'd

rather customize your subscription options, please visit our subscription page. Thanks again for visiting us!

del.icio.us Digg it reddit StumbleUpon Design Float Dzone Twitter Mixx Google Bookmark Yahoo Bookmarks Technorati Email this article to a friend

3. Pingbacks

1. Horizontal and Vertical Centering Using CSS: A Beginners Guide | Noobcube2. LimeSpace IT Links der Woche Webseiten Telearbeit und mehr..

3. css navigations | WebDesignExpert.Me4. Weekly Link Post 109 Rhonda Tiptons WebLog5. DotNetShoutout

Comments

(Add Comment)

1. Aditya Saxena

September 1, 2009

Wow! Hats off a very nice tutorial. I basked in the glory of reading such an excellent tutorial all of last night.

Jarod Taylor

September 2, 2009

Thank you so much for the kinds words. Im glad you enjoyed it! It takes so much time to create these things!

2.

didxgaSeptember 2, 2009

Advertising On Googlegoogle.com

Show up when your customers search. Learn more about Google adstoday.



Thank you ,Jarod Taylor for your excellent work! The tut helps so much to grasp the principle .I hope someday that i will be knowlegeable as you, a mentor fornewbies.

Jarod TaylorSeptember 2, 2009

Thank you! Im glad it helped you out! Trust me, I didnt invent this stuff, I have just done enough trial and error to figure things out. Dont worry, we allstart as noobs. Any help I can be, let me know.

Thanks.

didxgaSeptember 2, 2009

Thank YOU for the reply. I just wanna say that you are the amazing man doing the amazing things.I have no specific question right now to ask you.plzkeep your superb tuts going .

3.

Steve FerwerdaSeptember 2, 2009

Excellent tutorial. Ive bookmarked it for future reference. Yes, Im sure it took you a long time to get this ready. Those who have not done cant appreciate how

long these tutorials take.

Jarod Taylor

September 2, 2009

Youre not kiddin, I didnt even realize how long it took to write tutorials until I started writing them.

Im glad you found it useful. Thats the point of it, right!

Thanks.

4. Web Design AdelaideSeptember 5, 2009

Great article. Ive also bookmarked it for future reference, because it never ceases to amaze me the amount of times that an element just wont center the way youwant it.

5.

WebDesignExpert.MeSeptember 6, 2009

Great tutorial, is it possible to center something both horizontally and vertically but using css only and without using tables?


Does the element have a fixed width, and/or height?

6. hey

September 10, 2009

Hey the table exercise wont work with img why?




Hmm, thats weird. Which one are you referring to?

7.

heySeptember 11, 2009

ok i fixed it, but still it is not centered in IE6 (it is lightly to the right side). Check my source (it is short): http://wklej.org/id/148386/

Jarod Taylor

September 11, 2009

I ran your code in IE6 and it looks fine to me. Im using a different image than you obviously, but it shows to be working for me. What are you using to testin IE6?

8.


Im also showing your adding another td and tr tag without closing the others first?

9. hey

September 11, 2009

Thank you for the anserw, i have fixed the code, all now is w3c-ok. Take a look i uploaded it to free web server (domain is waiting for registration):

http://plysek.byethost31.com/ (the company is polish working only in poland so it is no advertisement on .com website)

Now it is centered, but too small xd, in firefox it is ok (50% width).

10. bustanilSeptember 14, 2009

Me can do Java programming.. but me are noob at design & CSS.. you help me a lot.. thanks

Great tutorial. Keep it up

11. Dejan Stani

September 30, 2009

Thanks.This is excellent tutorial for noobs like me.

12. company design logo



November 4, 2009

I Just love your post.The coding is very easy to understand.Great ,keep it up.

13. mehdiNovember 7, 2009

wow,wow! everything is perfect! this is the BEST article about centering, EVER! I wonder why u published it for free

14. Ramanujam

December 23, 2009

Nice information there!I have been trying to get an aligning issue fixed and guess one of the points has given me the direction.

15. chicago web designJanuary 19, 2010

Great post! I love the get IE to behave part. Great coding makes great sites!

16. Olivia

February 21, 2010

Awesome post! Most comprhensive Ive found on vertically centering with CSS. Im trying to give Vertically Center an Element with an Unknown Height a go,but not having much luck. Im trying to incorporate it into an already created layout, so I dont want to go crazy changing things around. In theory, to me, what Ive

done should work but it hasnt what am I doing wrong? Thanks!

Jarod Taylor

February 21, 2010

Thanks! Im glad you liked the post.

If you can give me a URL, Ill try and see if I can find out whats happening.

OliviaFebruary 21, 2010

If you just click the link in my name, thats it.

I looked at it in Chrome, Firefox, and IE8 on my PC and they all look the same: content hugging the top of the page. I looked at it on anothercomputer in IE, and it was shoved down the page a ways, but hugging the bottom of the page, and was behaving generally strangely.

17.

Jarod TaylorFebruary 21, 2010

Olivia,

You forgot to give BOTH the html and body element a height of 100%. You gave the body element a height of 100%, but didnt give the html element a height of100%. In order for the browser to be able to interpret your elements 100% height declaration, you need to give both the body and html elements a heightdeclaration of 100%.

html, body {

height: 100%;

}



18.

OliviaFebruary 21, 2010

Ah, that did it! Thanks!

19. Jarod TaylorFebruary 21, 2010

Awesome!

20. Ceca

February 23, 2010

This is great post! But I still have problem with vertical-align. My html code:

etc

and css:

table.products tr.imagerow td {vertical-align:bottom;}

table.products td {padding:5px;

width:33%;}

table.products tr.imagerow td a {

background-color:#FFFFFF;border:1px solid #2E4070;display:table-cell;

height:125px;vertical-align:middle;

width:125px;}

What is the best solution for my problem? Please, help!


Please give me a URL to an example. Ill see if I can see whats happening.

Thanks.

Ceca

February 23, 2010

http://ceca.void.rs.ba/mys0b2-20.htm

21.

MikeMay 11, 2010

An excellent post with an enormous amount of useful information in thanks so much.

Written with much patience,care and thought.



22.

Manmada ReddySeptember 13, 2010

Good one, great explanation.

23. Valikb

September 19, 2010

Thank you! Example helped me a lot.

24. Josh

September 23, 2010

Great article. Id like to add that jQuery UI has a great built in function called position();

http://docs.jquery.com/UI/Position

Helps you to vertically center elements with variable heights in spaces with variable heights if your happy to use a little bit of JS.

25. web design adelaideOctober 9, 2010

I cannot wait until They remove ie6 from the globe. The amount of padding issues I have had with joomla templates is beggining to irritate. I realize most dont use itbut I have had a customer who declares that unless it works 100% in IE8 shes not happy.

joy


Do you have a URL where youre attempting the shim method? I didnt see it on the URL you provided. My suggestion, if you have a fixed height, is toutilize the Absolute Positioning method.

1. Subscribe

RSS (Full)RSS (No Quick Tips)

TwitterEmail Updates

More

1. 2.

3. Categories

TutorialsHTML & CSSjQuery

Interface DesignFreebies

Textures & PatternsSite News

Quick TipsWordpressPhotoshop

Browse All

4. Popular Articles

Sorry. No data so far.

5. User Poll



6.

Where The?!

HomeAdvertiseBrowse Archives

Browse TutorialsBrowse ResourcesBrowse Freebies

Contact UsSubscribe By EmailSubscribe To RSS

Subscription OptionsFollow Us On Twitter

Who The?!

You can probably design beautiful interfaces, semantically mark them up using valid HTML & CSS, and even interact with databases using languages like PHP.

Eventually you come across something new and fresh, something you yearn to learn, and the words spill out -- how the heck did they do that?

Trust me, we've all been there.

Read More

How The?!

Trying to figure out how something was done? Can't find a tutorial on it? Tired of seeing the awesomeness elsewhere and not knowing how it was done?

If you're looking to learn a technique, trick or trend you see being used elsewhere; let us know and We'll do our best to figure out how it was done. If we don't know theanswer, and we find it an interesting topic, We'll find reputable resources and share them.

Let Us Know

Great Resources

A List Apart

BittboxCSS GlobeCSS-Tricks

NoupeScript & StyleSix Revisions

Smashing MagazineSpoon GraphicsTuts+ Network

Web Designer Wall

2009 Noobcube.com



Proudly powered by Wordpress.Valid XHTML 1.0 StrictValid CSS 2.1

Documents

Horizontal and Vertical Centering Using CSS_ a Beginner’s Guide _ Noobcube