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


Tags: html,css

Problem :

This question already has an answer here:

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!



Solution :

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>


    CSS Howto..

    Manual JavaScript Slideshow with Dynamic images

    How to force elements to stay in the same row

    how to get kendo ui mobile style silver

    How do you put in percentage based margin to a CSS grid?

    Can't show updated image

    How are scrollbars in new Google Docs UI styled (esp. the arrow buttons)?

    How to stretch images with no antialiasing

    How to auto resize the parent node according to its children

    How to make bevel and Embosed effect to button in CSS 3 for web-kit based browsers?

    How to display an Image after the main page

    How to rotate an element around a line other than X=0,Y=0 and Z=0 using CSS3?

    How to set CSS3 transition using javascript?

    How to hide the 2nd and 4th table row using css or jquery?

    How to execute select() method on polymer elements based on URL?

    How should I start to learn JavaScript, jQuery, etc.? My programming knowledge is zero [closed]

    Both DIV Popups Shown Instead of One

    CSS dropdown menu not showing the full texts of submenu items

    How to order a css file?

    How to get divs and anchors stacked on top of each other with the same width

    CSS: How to set position absolute of a span inside a relative-position-div which contains [closed]

    How to prevent from loading a css and a js sheet at only one Rails controller?

    How do I select a css element with a text not attached to the attribute?

    how to get a rounded corner table with a body in different color with CSS?

    How to get equal height for all sections?

    How to separate css style from common to different statement

    How do you make HTML elements appear on a vertical line using CSS?

    How to define CSS rules relative to previously defined values witout re-writing them?

    How to set auto-margin boxes in flexible-width design using CSS?

    how to stop centered css dropdown menu from twitching (chrome only)

    CSS: How to center a bottom-fixed menu