html/CSS how to make a div always center when the window is resized

Question

I have a navigation bar which I want it to always stay centered when the window is resized. The bar is on top of a picture which serves as the background of the website. Here's the code:

<!doctype html>
<html lang="en">

<head>
 <style>
  body {
   font-family: Trebuchet MS;
  }
       .containermain {
   margin: auto;
  }
        .navibar {
   z-index: 1;
   position: absolute;
   background-color: #000000;
   border-radius: 5px;
   /*text-align: center;*/
   left: 200px;
   right: 80px;
   top:140px;
   width: 870px;
   /*max-width: 100%;*/
   margin: auto;
  }
     </style>
</head>
<body style="margin:0px;">

 <div class="containermain">
  <img class="bg" src="bg.png" alt="background">
 </div>
 
 <div class="navibar">
   <a class="button btnhome" href="x.html#home" target="_blank">home</a>
   <a class="button" href="x.html#portfolio" target="_blank">portfolio</a>
   <a class="button" href="x.html#blog" target="_blank">blog</a>
   <a class="button" href="x.html#contact" target="_blank">contact</a>
 </div>
 </body>
 </html>

I've tried several approach like "margin: auto", but nothing works, the navi bar is pinned to the place. Please help, thanks in advance!

try to give width:80% with margin-left:auto margin-right:auto. — Leo the lion, Sep 02 '16 at 07:38
why not use a background-image as the background - then you don't need to absolutely position the nav-bar, but to answer you question - if you give it a left and a right value, it will always be start that far from the left and end that far from the right. As you have given it a width as well, I think that's what is confusing it. Do you want the width to always be 870px and the navbar centered? or do you need the navbar to start 200px from the left and end 80px from the right? — Pete, Sep 02 '16 at 07:46
@Pete I want the bar to to be centered when the window is resized, also when the window is resized to the point where the whole bar won't be shown in one piece, instead of move to the next line automatically, I want it to stay where they are. — DawnZHANG, Sep 02 '16 at 19:12

score 1 · Accepted Answer · answered Sep 02 '16 at 07:42

Navbar is fixed to the position because of position: absolute and left:200px & right: 80px values. Try below snippet.

If you want space on the top, use margin-top: 140px

<!doctype html>
<html lang="en">

<head>
  <style>
    body {
      font-family: Trebuchet MS;
    }
    .containermain {
      margin: auto;
    }
    .navibar {
      z-index: 1;
      background-color: #000000;
      border-radius: 5px;
      width: 870px;
      margin: auto;
    }
  </style>
</head>

<body style="margin:0px;">

  <div class="containermain">
    <img class="bg" src="bg.png" alt="background">
  </div>

  <div class="navibar">
    <a class="button btnhome" href="x.html#home" target="_blank">home</a>
    <a class="button" href="x.html#portfolio" target="_blank">portfolio</a>
    <a class="button" href="x.html#blog" target="_blank">blog</a>
    <a class="button" href="x.html#contact" target="_blank">contact</a>
  </div>
</body>

</html>

The position has to be absolute, otherwise it will move to the bottom of the screen. The bar is on top of a picture, that's why I use position: absolute; — DawnZHANG, Sep 02 '16 at 07:54
@DawnZHANG : Instead of using `` as background, try [background-image](http://www.w3schools.com/cssref/pr_background-image.asp) on `` — Pugazh, Sep 02 '16 at 09:15

score -1 · Answer 2 · answered Sep 02 '16 at 07:44

-1

Try using flexbox CSS. This is browser dependant though, but so easy in centering content.

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

answered Sep 02 '16 at 07:44

nareeboy

149
13

html/CSS how to make a div always center when the window is resized

2 Answers2