0

Is it possible to make the <article> and its content stay in the centre of the page?

Here's a link to my website: http://www.haloallure.co.nf

When you visit a website the article is normally in the centre of the page, but in my case the article only stays in the centre when its width is the same as the screen.

How can I make the light blue part of the page stay in the centre even when I decrease the width?

Rahil Wazir
  • 10,007
  • 11
  • 42
  • 64
aleks
  • 19
  • 4
  • add margin:0 auto to article class... – sinisake Mar 06 '14 at 19:21
  • Just adding a margin:auto; to your "article" style will center it. i see your using inline styles – Adim Mar 06 '14 at 19:25
  • 2
    @aleks For future reference, you should avoid linking to your website in a question. Once you fix your site, this question won't adequately show the problem that you are trying to fix. It's better to setup a jsfiddle that shows the issue so it can helps others in the future. – developering Mar 06 '14 at 19:26
  • @jompion sure Ill do tha – aleks Mar 06 '14 at 19:30

1 Answers1

2

Give it a width (less than 100%), and set its margin(s) to auto:

article {
    width: 800px;
    margin: auto;
}

By default the <article> takes up all available horizontal space of its containing element. This means it's just as wide as the parent (generally speaking). In order to center it, we'll have to reduce its width so that it's less than the containing element. In the example above, I went with 800px, but you could just as easily use an em, rem, or % value.

By setting the margin to auto we ask the browser to determine an equal set of margin values for the sides of the element. The browser, in turn, determines what is needed to place the element in the middle of the containing element.

You might even consider giving it different styles for different widths:

/* When the viewport is 600px+ wide, article is 500px */
@media ( min-width: 600px ) {
    article {
        width: 500px;
        margin: auto;
    }
}

/* When the viewport is 800px+ wide, article is 600px */
@media ( min-width: 800px ) {
    article {
        width: 600px;
    }
}
Sampson
  • 265,109
  • 74
  • 539
  • 565