Centering technique html css

We can center a section of html in one way by creating a class for the section, say class=”container”.  Then we can set its margin attribute to margin: 0 auto;, this will set margin-top and margin-bottom to 0px and set the left and right margins to auto.  That means the browser will automatically set equal margin sizes on left and right of the container.

All you need now is to provide a width.  This can be a fixed px size like say 600px;, or you can use a percent to be more responsive.  This will center your container.

 

.container { margin: 0 auto; padding-left: 30px; padding-right: 30px; width: 960px; }

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: