Question

我有一个导航栏，我希望它在调整窗口大小时始终保持居中。酒吧位于图片的顶部，作为网站的背景。这是代码：

＆＃13;

<!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>

＆＃13;

我尝试了几种类似＆＃34; margin：auto＆＃34;的方法，但没有任何效果，导航栏固定在该位置。请帮助，提前谢谢！

Answer 1

导航栏由于position: absolute和left:200px而导致固定在该位置。 right: 80px值。请尝试以下代码段。

如果您想在顶部留出空间，请使用margin-top: 140px

＆＃13;

<!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>

＆＃13;

Answer 2

尝试使用flexbox CSS。这虽然取决于浏览器，但在内容中心却很容易。

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

html / CSS如何在调整窗口大小时使div始终居中

2 个答案: