Center whole webpage?

CS Discoveries
1

A student wants to center ALL of the webpage. He tried setting a rule set for the body to float to the center but it didn’t work. Is there a way to do this?? We explored the documentation but couldn’t find anything about centering the WHOLE webpage. Would he just have to add a float and align rule set for each element?

2

Hi @GordonBrune,

Yep - this is a common question among my students too! This is a pretty easy style. Because it is the whole page, it applies to the body selector. Here are the basics for centering the whole page

body{
margin:auto;
width:80%;
text-align:center;
}
The margin property with auto values centers the body both horizontally and vertically on the screen and the width property puts some nice space on the left and right of the page so that on large screens, the content is not stretched form far left to far right. You can play around with that value if you don’t like it.

Good luck!
~Michelle

1 Like
3

Thanks so much! Curious, how did you figure that out? Just trial and error? Experience with html\css from other places? Because we couldn’t figure it out using anything from Documentation and we couldn’t remember any explicit lesson\skill building about it.

4

@GordonBrune I don’t think it’s documented in code.org. What is documented on code.org is only a tip of the iceberg of the tips and tricks for using html and css, but that one is a fairly standard trick for centering elements.

It would be nice to add more documentation for things like that. Layout is one of the html / css topics that students are most interested in and that I think could stand to be updated in the course.

Mike

5

Yes! Layout is what most of the students want to play with and I don’t (yet) have the experience to help them with.

6

This is a little late to the party, but maybe for future reference … Instead of using width:80%, you can use something like max-width: 960px; This will allow the page to use the whole screen on phones, tablets and other narrow devices, but restrict the width to 960 px on a widescreen monitor. 960px used to be fairly standard, but I am seeing more 1200px now as a max-width.

Mike

1 Like