我试图完成菜单和标题的操作，但是，当我调整浏览器窗口的大小时，菜单和标题向右移动，不会居中或停留在我想要的位置。任何帮助将非常感激。下面的HTML和CSS。
var slideIndex = 0;
carousel();
function carousel() {
var i;
var x = document.getElementsByClassName("mySlides");
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
slideIndex++;
if (slideIndex > x.length) {
slideIndex = 1
}
x[slideIndex - 1].style.display = "block";
setTimeout(carousel, 2000);
}@charset "UTF-8";
/* CSS Document */
body {
width: 100%;
margin: 0, auto;
}
body {
min-width: 100px;
}
body {
background-color: rgba(255, 255, 255, 1.00)
}
body,
h1,
h2,
h3,
p {
font-family: "Verdana", sans-serif;
}
h1 {
font-size: 3em;
text-align: center;
font-weight: lighter;
position: relative;
margin-top: 0px;
margin-bottom: 0px;
}
h2,
h3 {
font-weight: normal;
}
h2 {
font-size: 1.3em;
text-align: fixed;
margin-right: 600px;
margin-bottom: 0px;
margin-top: 0px;
margin-left: 339px;
font-family: "Verdana", sans-serif;
}
h3,
p {
font-size: 1em;
font-family: 100% "Verdana", sans-serif;
margin-left: 339px
}
ul {
font-size: 1.2em;
}
ul {
list-style-type: none;
text-align: center;
}
a,
li,
h2,
h3,
p {
text-decoration: none;
color: rgba(128, 128, 128, 1.00)
}
img {
margin-top: 0px;
}
li {
margin-top: 0px;
}
header {
margin-top: 0px;
}
menu {
margin-top: 0px;
margin-bottom: 0px;
}
img {
width: inherit;
max-height: 500px;
position: inherit;
object-fit: contain;
}
div {
width: 100%;
margin-bottom: 0px;
margin-top: 0px;
border: 0px solid #FFFFFF;
position: relative;
}
.menu-wrap {
position: relative;
width: 1000px;
margin-top: 0px;
margin-bottom: 0px;
}
/* drop down menu */
.clearfix:after {
display: inherit;
clear: both;
margin-bottom: 0px;
}
.menu {
width: 720px;
min-width: 720px;
margin-left: 259px;
}
.menu li {
margin: 0px;
list-style: none;
font-family: "Verdana", sans-serif;
}
.menu a {
transition: all linear 0.15s;
color: rgba(135, 135, 135, 1.00);
}
.menu li:hover>a,
.menu .current-item>a {
text-decoration: none;
color: rgba(135, 135, 135, 1.00);
}
.menu .arrow {
font-size: .5em;
line-height: 0%;
}
.menu>ul>li {
float: left;
display: inline-block;
position: relative;
font-size: 19px;
}
.menu>ul>li>a {
padding: 10px 40px;
display: inline-block;
}
.menu>ul>li:hover>a,
.menu>ul>.current-item>a {
background: #DCDADA;
}
.menu li:hover .sub-menu {
z-index: 6;
opacity: 2;
}
.sub-menu {
width: 171px;
padding: 0px 0px;
position: absolute;
top: 44px;
left: 1px;
z-index: -1;
opacity: 0;
transition: opacity linear 0.15s;
box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.2);
background-color: rgba(255, 255, 255, 1.00);
height: 349px;
}
.sub-menu li {
display: block;
font-size: .7em;
color: rgba(135, 135, 135, 1.00);
}
.sub-menu li a {
padding: 10px 30px;
display: block;
}
.sub-menu li a:hover,
.sub-menu .current-item a {
background-color: rgba(231, 231, 231, 1.00);
}<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="description" content="Earth, Wind, Fire & Water Project">
<title>Earth, Wind, Fire & Water</title>
<link rel="stylesheet" href="../../Xavier website styles.css">
</head>
<body>
<div>
<header>
<h1><a href="../../Xavier home:portfolio page.html">Xavier King</a></h1>
</header>
<div class="menu-wrap">
<nav class="menu">
<ul class="clearfix">
<li><a href="../../Xavier home:portfolio page.html">Portfolio </a></li>
<li>
<a>Projects <span class="arrow">▼</span></a> <ul class="sub-menu">
<li><a href="../freedom/freedom.html">Are We Free?</a></li>
<li><a href="../Ben Hart/Ben Hart.html">Ben Hart</a></li>
<li><a href="../Daisy Bertenshaw/Daisy Bertenshaw.html">Daisy Bertenshaw</a></li>
<li><a href="../Decay/Decay.html">Decay</a></li>
<li><a href="../Earth Wind FIre and Water/Earth, Wind, FIre and Water.html">Earth, Wind, Fire & Water</a></li>
<li><a href="../Frozen In Time/Frozen In Time.html">Frozen In Time</a></li>
<li><a href="../The CCTV's Eye/The CCTV's Eye.html">The CCTV's Eye</a></li>
</ul> <li><a href="../../Xavier CV page.html"> CV </a></li><li><a href="../../Xavier contact info page.html"> Contact</a></li>
</li>
</ul>
</nav>
</div>
<h2>Earth, Wind, Fire, Water</h2>
<img class="mySlides" src="b&r air.jpg" height="500" alt="B & R Air" />
<img class="mySlides" src="b&y air.jpg" width="" height="500" alt="B & Y Air"/>
<img class="mySlides" src="y&r air.jpg" width="" height="500" alt="Y & R Air"/>
<img class="mySlides" src="b&r earth.jpg" width="" height="500" alt="B & R Earth"/>
<img class="mySlides" src="b&y earth.jpg" width="" height="500" alt="B & Y Earth"/>
<img class="mySlides" src="y&r earth.jpg" width="" height="500" alt="Y & R Earth"/>
<img class="mySlides" src="b&r fire.jpg" width="" height="500" alt="B & R Fire"/>
<img class="mySlides" src="b&y fire.jpg" width="" height="500" alt="B & Y Fire"/>
<img class="mySlides" src="y&r fire.jpg" width="" height="500" alt="Y & R Fire"/>
</body>
</html>最佳答案
尝试：
.menu {
width: 720px;
min-width: 720px;
margin: 0 auto;
}
这样，它以类似
.menu的方式将text-align: center居中。var slideIndex = 0;
carousel();
function carousel() {
var i;
var x = document.getElementsByClassName("mySlides");
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
slideIndex++;
if (slideIndex > x.length) {
slideIndex = 1
}
x[slideIndex - 1].style.display = "block";
setTimeout(carousel, 2000);
}@charset "UTF-8";
/* CSS Document */
body {
width: 100%;
margin: 0, auto;
}
body {
min-width: 100px;
}
body {
background-color: rgba(255, 255, 255, 1.00)
}
body,
h1,
h2,
h3,
p {
font-family: "Verdana", sans-serif;
}
h1 {
font-size: 3em;
text-align: center;
font-weight: lighter;
position: relative;
margin-top: 0px;
margin-bottom: 0px;
}
h2,
h3 {
font-weight: normal;
}
h2 {
font-size: 1.3em;
text-align: fixed;
margin-right: 600px;
margin-bottom: 0px;
margin-top: 0px;
margin-left: 339px;
font-family: "Verdana", sans-serif;
}
h3,
p {
font-size: 1em;
font-family: 100% "Verdana", sans-serif;
margin-left: 339px
}
ul {
font-size: 1.2em;
}
ul {
list-style-type: none;
text-align: center;
}
a,
li,
h2,
h3,
p {
text-decoration: none;
color: rgba(128, 128, 128, 1.00)
}
img {
margin-top: 0px;
}
li {
margin-top: 0px;
}
header {
margin-top: 0px;
}
menu {
margin-top: 0px;
margin-bottom: 0px;
}
img {
width: inherit;
max-height: 500px;
position: inherit;
object-fit: contain;
}
div {
width: 100%;
margin-bottom: 0px;
margin-top: 0px;
border: 0px solid #FFFFFF;
position: relative;
}
.menu-wrap {
position: relative;
width: 1000px;
margin-top: 0px;
margin-bottom: 0px;
}
/* drop down menu */
.clearfix:after {
display: inherit;
clear: both;
margin-bottom: 0px;
}
.menu {
width: 720px;
min-width: 720px;
margin: 0 auto; /*-------------- This code ------------*/
}
.menu li {
margin: 0px;
list-style: none;
font-family: "Verdana", sans-serif;
}
.menu a {
transition: all linear 0.15s;
color: rgba(135, 135, 135, 1.00);
}
.menu li:hover>a,
.menu .current-item>a {
text-decoration: none;
color: rgba(135, 135, 135, 1.00);
}
.menu .arrow {
font-size: .5em;
line-height: 0%;
}
.menu>ul>li {
float: left;
display: inline-block;
position: relative;
font-size: 19px;
}
.menu>ul>li>a {
padding: 10px 40px;
display: inline-block;
}
.menu>ul>li:hover>a,
.menu>ul>.current-item>a {
background: #DCDADA;
}
.menu li:hover .sub-menu {
z-index: 6;
opacity: 2;
}
.sub-menu {
width: 171px;
padding: 0px 0px;
position: absolute;
top: 44px;
left: 1px;
z-index: -1;
opacity: 0;
transition: opacity linear 0.15s;
box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.2);
background-color: rgba(255, 255, 255, 1.00);
height: 349px;
}
.sub-menu li {
display: block;
font-size: .7em;
color: rgba(135, 135, 135, 1.00);
}
.sub-menu li a {
padding: 10px 30px;
display: block;
}
.sub-menu li a:hover,
.sub-menu .current-item a {
background-color: rgba(231, 231, 231, 1.00);
}<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="description" content="Earth, Wind, Fire & Water Project">
<title>Earth, Wind, Fire & Water</title>
<link rel="stylesheet" href="../../Xavier website styles.css">
</head>
<body>
<div>
<header>
<h1><a href="../../Xavier home:portfolio page.html">Xavier King</a></h1>
</header>
<div class="menu-wrap">
<nav class="menu">
<ul class="clearfix">
<li><a href="../../Xavier home:portfolio page.html">Portfolio </a></li>
<li>
<a>Projects <span class="arrow">▼</span></a> <ul class="sub-menu">
<li><a href="../freedom/freedom.html">Are We Free?</a></li>
<li><a href="../Ben Hart/Ben Hart.html">Ben Hart</a></li>
<li><a href="../Daisy Bertenshaw/Daisy Bertenshaw.html">Daisy Bertenshaw</a></li>
<li><a href="../Decay/Decay.html">Decay</a></li>
<li><a href="../Earth Wind FIre and Water/Earth, Wind, FIre and Water.html">Earth, Wind, Fire & Water</a></li>
<li><a href="../Frozen In Time/Frozen In Time.html">Frozen In Time</a></li>
<li><a href="../The CCTV's Eye/The CCTV's Eye.html">The CCTV's Eye</a></li>
</ul> <li><a href="../../Xavier CV page.html"> CV </a></li><li><a href="../../Xavier contact info page.html"> Contact</a></li>
</li>
</ul>
</nav>
</div>
<h2>Earth, Wind, Fire, Water</h2>
<img class="mySlides" src="b&r air.jpg" height="500" alt="B & R Air" />
<img class="mySlides" src="b&y air.jpg" width="" height="500" alt="B & Y Air"/>
<img class="mySlides" src="y&r air.jpg" width="" height="500" alt="Y & R Air"/>
<img class="mySlides" src="b&r earth.jpg" width="" height="500" alt="B & R Earth"/>
<img class="mySlides" src="b&y earth.jpg" width="" height="500" alt="B & Y Earth"/>
<img class="mySlides" src="y&r earth.jpg" width="" height="500" alt="Y & R Earth"/>
<img class="mySlides" src="b&r fire.jpg" width="" height="500" alt="B & R Fire"/>
<img class="mySlides" src="b&y fire.jpg" width="" height="500" alt="B & Y Fire"/>
<img class="mySlides" src="y&r fire.jpg" width="" height="500" alt="Y & R Fire"/>
</body>
</html>关于javascript - 调整页面大小时，菜单和标题会移动，我在做什么错？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/42475470/