Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
One of the most challenging things to accomplish in CSS is to vertically center block level elements inside parent containers. If you don't know the dimensions of the containing element, things get a lot easier as you can just use margins and/or padding to do the job for you. But if you don't know the dimensions of the parent element though? In those cases, while there is no bulletproof method, you can turn to a pair of techniques that will get the job done for you. The first technique we are going to look at involves using the vertical align property we learned about previously. Instead of using the vertical align on adjust inline elements, we can also use it on block level elements, if the block level elements are inside a table cell.
You would think that would require a lot of unnecessary table elements clogging up a code structure but you'd also be wrong. We can use the display property to tell standard compliant browsers to display the container elements as if they were table cells. Doing this allows us to employ the vertical align property to anything contained within. There are, as we'll see, some drawbacks to using this method. So open up the vertical_centering1.htm. So there are two vertical centering files. You want to make sure you have the first one, vertical_centering1.htm, opened up.
Now I'm going to turn my attention to the sidebar because this is what we are going to want to center. There has been a little structural change to the sidebar. I'm going to show what I mean. So we still have our parent sidebar tag but inside that we have a brand new div tag with an id of verticalAlign and inside that is our sidebar content. In this case, the block level element of a paragraph. So we want to take the paragraph and vertically center it within the sidebar and it's the div tag that's going to be the key to getting this done. So that's a little extra structural markup but for the results we are going to get, I think you will agree that it is worth it.
Now the first thing I want to do is horizontally center the paragraph within the sidebar and that's pretty easy to achieve. What we are going to do is I'm going to go to my CSS Styles panel, and I'm going to find my #sidebar p selector. We are just going to go ahead and center this using auto margins. So I'm going to add a property and I'm going to add the margin property and we want to give it a top and bottom margin of 0. So we are going to use a little shorthand notation here, then I'm going to do a space and type in auto. All right, so let's talk about what this is doing.
So whenever you use shorthand notation for margins, and you pass two values, the first value is used for top and bottom, the second value is used for right and left. So by saying 0 top and bottom, we are not adding any additional margin vertically to our paragraph but by using auto margin left and right, what we are basically saying is based on the width of the paragraph, the remaining width inside the parent element should be split equally between the left and the right side. This results in the centering of the element. It's the same technique we use to center our pages so there is a lot more about this technique in the chapter on layout.
Okay, so let's turn our attention back to vertically centering this element now. So the next thing we need to do is that in our parent element rule, in this case that's the #sidebar rule. Now normally we have been editing our rules using the CSS Styles panel but this time I'm going to double-click this to open up our CSS Rule Definition dialog box. The reason is I want you guys to know where this property is found in case you are creating this rule from scratch. So in the Category, I'm going to click on the Block category because that's where we can find the Display property. Now normally when people use the Display property, they are either changing something from an inline to a block level element or back to an inline element, or just saying none so that something doesn't display all together.
But as you can see from this pull-down menu, there are a lot of other choices. Now since the sidebar is the parent element, we are going to make it display like a table. So choose table, and click OK. Now you will note that there is no visual change to our sidebar but the structural change to it is now within the browser, we can make things inside of it behave as if they were inside of a table, and that's going to lead us to our vertical centering. So I'm going to go ahead and create a brand new CSS rule and this can be an ID selector, and we are going to do #verticalAlign.
So we got to spell that exactly the same way that it is spelled and capitalized in the code itself. We are going to define that in main.css, and I'm going to click OK. Now there is not going to be a lot to this rule. We are concentrating mainly on that vertical alignment. So I'm going to click on the Block category. Now this time, when I grab the pull-down menu for Display, instead of going down to table, what I'm going to choose is table-cell. So we are making the parent element behave as a table, we are making this interior block level element to behave as a table cell.
Now because this is a table cell, certain properties now apply to it. One of those properties would be vertical align. So I'm going to grab the Vertical-align pull-down menu and I'm going to choose middle, I click OK and I'm going to do Save All. Now just because it doesn't look right in Dreamweaver, it doesn't mean that it isn't going to work in our browsers. So what I'm going to do is I'm going to go pull-down menu and choose to preview that in Firefox. Sure enough, I now have a vertically aligned element, perfect. Now in the perfect world, I wouldn't really need to use any other technique but unfortunately, while this technique works in the standard compliant browsers, Internet Explorer can be decidedly none-standards compliant.
The Display table-cell property is not supported in Internet Explorer meaning this technique won't work for that browser. So I'm going to go ahead and go back in the Dreamweaver and close vertical_centering1. Over in the 05_09 folder, I'm going to open up vertical_centering2 because for Internet Explorer we are going to use another technique. This one works fine in IE but unfortunately it doesn't work in other standard compliant browsers. And for those of you who are new to CSS, I'm sorry to say that this is not an isolated occurrence. Welcome to the wonderful world of browser support.
In this technique, we'll use positioning to achieve our centering. Now if you don't know a lot about positioning, you might want to check out the chapter on layout where we talk about positioning in greater detail. For the time being, we are going to focus on structure and how this positioning attribute allows us to vertically center without knowing the exact height of the container element. So if I look over my sidebar, I can see and in this example, the structure is exactly the same. So at least the good news about these two techniques is that it can use exactly the same structure. So we have a paragraph, we have a verticalAlign div tag that's going to help us with our centering and then we have the parent sidebar.
So the first thing I'm going to do is go in and use auto margins to horizontally center our sidebar paragraphing. So go to #sidebar p, we'll add this property and again we are just going to add the same shorthand notation, margin 0 for top and bottom, space and then the word auto to center it horizontally, okay. Go ahead and do a Save All. And now let's get into the meat of this particular technique. What we are going to do is go up to your sidebar selector and you can just go ahead and double-click that if you would like to bring that up in the CSS Rule Definition dialog box.
And again, I just want you to see where the positioning attributes are set within this rule, in case you are creating a new one. In fact, we have a category for Positioning. So I'm going to click on the Positioning category and we'll go ahead and set a couple of attributes here. The first thing I'm going to do is set the Position to relative, and I'm going to set Overflow to hidden now. Let's talk about what that does for us. By setting Position to relative, we cause any elements nested inside of it to be positioned relative to it, and not the view or other parent tags.
So really we are just setting the sidebar as the boundaries for where the paragraph inside of it is going to be positioned. The reason that we did hidden is just in case the paragraph has more content in it than the sidebar can hold, the paragraph will be clipped off and will spill over and ruin the layout. So go ahead and click OK, and the next thing we need to do is add our rule for vertical align. So I'm going to choose New CSS Rule, once again this is an ID selector, and we are going to type in #verticalAlign.
Make sure you are defining this one in the main2.css, and go ahead and click OK. Now here is where our techniques really differ. I'm going to go to the Positioning category again, and this time I'm going to position it using absolute positioning. Now we cover positioning in the chapter on layout, so to learn a lot more about how these positioning attributes work, please be sure to check out the layout chapter. So we are setting this to position absolute, and we are setting our Top position to 50%. All right, so what is that going to do for us? Well, what that's going to do is it's going to move the entire verticalAlign div down, so that the top of it is halfway down the sidebar.
So if I click Apply, you can literally see that happen. Remember it uses this point as a starting point because we set our sidebars positioning attribute to relative. So it moves it down to halfway, 50%. Now that gets us close but it doesn't get us there. So I'm going to click OK and there is still one more rule we have to modify. I am going to go up and find the #sidebar p, double-click that and we are going to do a little positioning on this element as well. So I'm going to click on Positioning and I'm going to change the Position from absolute this time to relative.
Relative positioning allows it to stay within this normal document flow and allows us to offset it and that is exactly what we are going to do here. For Placement, for Top, I'm going to type in -50%. Now let's talk about what that's going to do. It's going to move it halfway between the top of its parent container element, that's a sidebar, and its current position. So that's going to move the top of the paragraph to here, which is going to give us our vertical centering. I'm going to go ahead and click OK, do a Save All. Now sort of kind of looks centered here but it's not rendering correctly, and if I tested this in any other browser than Internet Explorer, it wouldn't look right to begin with.
But if I preview this in Internet Explorer, we can see that our paragraph is vertically centered within the sidebar. So there you have it. One technique that works in standard compliant browser and another one works in Internet Explorer. Now as you'll learn in our chapter on deploying CSS, we could pass the Internet Explorer specific markup in using a conditional comment. In a perfect world, we could just use one technique and stick with it but in the very real world of CSS, you'll often have to find multiple ways of dealing with different browsers and devices.
It's a frustrating but necessary skill when creating your styles. In truth, there is even a simpler solution to the problem: design around it. One of the things that learning CSS will teach you is the beauty of simple and elegant code. Designing towards that will often avoid problems such as this.
Get unlimited access to all courses for just $25/month.Become a member
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.
Your file was successfully uploaded.