-4

fairly basic question really, can't seem to find it in the search so apologies if it's already there.

How is this responsive website content centred? http://www.aartirestaurant.com/

I'm looking in the body margins but can't see anything.

Thanks in advance.

revrev
  • 1

6 Answers6

0

Each child element on this website under the body tag have the following in their CSS classes:

margin: 2em auto 0;

The auto value tells the browser to render left and right margin automatically. This sets the same amount of margin on both sides of the element, and the element is centered.

Alex Gyoshev
  • 11,929
  • 4
  • 44
  • 74
Ole Haugset
  • 3,709
  • 3
  • 23
  • 44
0

Margin for logo and content has margin:auto property which make those div to put in center. :)

Laxmikant Dange
  • 7,606
  • 6
  • 40
  • 65
0

It's just setting horizontal margins for divs to 'auto'

Joint
  • 1,218
  • 1
  • 12
  • 18
0

For the main div add the style:

width:1000px; // give a width
margin:auto;
SharpC
  • 6,974
  • 4
  • 45
  • 40
Wazan
  • 539
  • 1
  • 8
  • 27
0

the given website has navi,content and logo id respectively. In that ,one property you should see margin: 2em auto 0; margin 0 auto is used to center your page

jswoody
  • 27
  • 10
0

In the given example, the id "navi" and content are given the following margins:

#navi {
    margin: 2em auto 0;
}

and

#content {
    margin: 2em auto 0;
}

This auto value, means that the browser will compute the value needed for centering the block. The margin-property expanded would look like this:

margin-top: 2em;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
HrJakobsen
  • 1
  • 1