html - 为什么我的页脚不居中？-6ren

html - 为什么我的页脚不居中？

转载作者：行者123 更新时间：2023-11-28 17:29:05

基本上我希望页脚为 40em 宽并位于页面底部的中央，导航会这样做，但由于某种原因页脚保持在左边距。

/* RESET */

html, body, div, span, h1, h2, h3, h4, h5, h6, p, ul, ol, li, dl, dt, dd, img, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, a, article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section {
  /* Cancel out some differences between browser defaults */
  margin: 0;
  padding: 0;
  border: 0;
  font: inherit;
  vertical-align: baseline;
}

* {
  /* Padding and borders will be subtracted from the content box width, not added to it. */
  box-sizing: border-box;
}

article, aside, audio, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section {
  /* Make sure the browser knows how to display HTML5 elements */
  display: block;
}

header img{
  display: block;
  width: 30em;
  margin-left: auto;
  margin-right: auto;
  padding-top: 2em;
  padding-bottom: 1em;
}
#wrap{
  background-image: url(Images\seamless-old-style-wallpaper-Download-Royalty-free-Vector-File-EPS-37757.jpg);
  background-repeat: repeat;
  background-size: cover;
  width: 100%;
  height: 100%;
  border: 1px;
}
nav {
    width: 40em;
    height: 3em;
    background: light grey;
    padding-top: 1em;
    border-top: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
    margin-right: auto;
    margin-left: auto;
    color: white;
  }

nav ul {
    overflow: hidden;
    margin: 0;
    padding: 0;
}

nav ul li {
    list-style: none;
    float: left;
    text-align: center;
    color: white;
    width: calc(40em / 6);

}



nav ul li a, nav ul li a :visited  {
    display: block;
    text-decoration: none;
    color: #white;
}

nav ul li a: hover {
  color: brown;
}
li a { text-decoration: none; color:#fff; }
li a:visited { text-decoration: none; color:#fff; }
li a:hover { text-decoration: none; color:#512e15; }
li a:focus { text-decoration: none; color:#fff; }
li a:hover, li a:active { text-decoration: none; color:#512e15; }

footer{
  display: flex;
  position: absolute;
  bottom: 0px;
  width: 40em;
  margin-left: auto;
  margin-right: auto;
  height: 3em;
  background-color: light grey;
  padding-top: 1em;
  border-top: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
}

p, address, #phone, #email{
  color: white;
  padding-left: 1em;
  padding-right: 1em;
  font-size: .75em;
}
footer img{
  height:1em;
  width: 2em;
  padding-left: 1em;


}
body{
  display: flex;
}
aside{
  display: inline-flex;
  color: white;
  font-size: 2em;
  width: 50%;
  height: 100%;
}
#body h1{
  color: white;
  margin-left: auto;
  margin-right: auto;
  font-size: 5em;
  text-align: center;

}

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>Great Art</title>
	<link rel="stylesheet" href="stylesheet.css">
</head>
<body>
	<body background="Images\flock_wallpaper_pattern_by_hydrogen666.jpg">
	<div id= wrap>
		<header>
			<img src = "Images\Great Art logo for em.jpg" alt="Great Art Logo"> </img>
		</header>
		<nav>
			<ul>
				<li><a href="index.html">home</a></li>
				<li><a href="Gallery.html">gallery</a></li>
				<li><a href="artist biography.html">artist biography</a></li>
				<li><a href="blog.html">blog page</a></li>
				<li><a href="about us.html">About us</a></li>
				<li><a href="contact us.html">contact us</a></li>
			</ul>
		</nav>
		<div id= body>
			<h1>Artist Biography</h1>
			<div id= leftSide>
				<p>Vincent van Gogh, one of the most well-known post-impressionist artists, for whom color was the chief symbol of expression, was born in Groot-Zundert, Holland on March 30, 1853.
					The son of a pastor, brought up in a religious and cultured atmosphere, Vincent was highly emotional, lacked self-confidence and struggled with his identity and with direction.
					He believed that his true calling was to preach the gospel; however, it took years for him to discover his calling as an artist. Between 1860 and 1880, when he finally decided to
					become an artist, van Gogh had already experienced two unsuitable and unhappy romances and had worked unsuccessfully as a clerk in a bookstore, an art salesman, and a preacher in the
					Borinage (a dreary mining district in Belgium) where he was dismissed for overzealousness.
				</p>
			</div>
		</div>
		<footer>
			<p> Great Art </p>
			<address> PO Box 12-345 Christchurch </address>
			<p id =phone> Phone: 03 345 6789 </p>
			<p id= email> Email: hubert@great-art.org.nz </p>
			<img src= "Images\fb-art.jpg"</img>
			<img src= "Images\twitter logo.png"</img>
		</footer>
	</div>

</body>
</html>

任何帮助将不胜感激，我不知道该去哪里

最佳答案

/* RESET */

html, body, div, span, h1, h2, h3, h4, h5, h6, p, ul, ol, li, dl, dt, dd, img, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, a, article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section {
  /* Cancel out some differences between browser defaults */
  margin: 0;
  padding: 0;
  border: 0;
  font: inherit;
  vertical-align: baseline;
}

* {
  /* Padding and borders will be subtracted from the content box width, not added to it. */
  box-sizing: border-box;
}

article, aside, audio, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section {
  /* Make sure the browser knows how to display HTML5 elements */
  display: block;
}

header img{
  display: block;
  width: 30em;
  margin-left: auto;
  margin-right: auto;
  padding-top: 2em;
  padding-bottom: 1em;
}
#wrap{
  background-image: url(Images\seamless-old-style-wallpaper-Download-Royalty-free-Vector-File-EPS-37757.jpg);
  background-repeat: repeat;
  background-size: cover;
  width: 100%;
  height: 100%;
  border: 1px;
}
nav {
    width: 40em;
    height: 3em;
    background: light grey;
    padding-top: 1em;
    border-top: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
    margin-right: auto;
    margin-left: auto;
    color: white;
  }

nav ul {
    overflow: hidden;
    margin: 0;
    padding: 0;
}

nav ul li {
    list-style: none;
    float: left;
    text-align: center;
    color: white;
    width: calc(40em / 6);

}



nav ul li a, nav ul li a :visited  {
    display: block;
    text-decoration: none;
    color: #white;
}

nav ul li a: hover {
  color: brown;
}
li a { text-decoration: none; color:#fff; }
li a:visited { text-decoration: none; color:#fff; }
li a:hover { text-decoration: none; color:#512e15; }
li a:focus { text-decoration: none; color:#fff; }
li a:hover, li a:active { text-decoration: none; color:#512e15; }

footer{
  display: flex;
  position: absolute;
  bottom: 0px;
  width: 40em;
  margin-left: auto;
  margin-right: auto;
  height: 3em;
  background-color: light grey;
  padding-top: 1em;
  border-top: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
  left: 0;
  right: 0;
}

p, address, #phone, #email{
  color: white;
  padding-left: 1em;
  padding-right: 1em;
  font-size: .75em;
}
footer img{
  height:1em;
  width: 2em;
  padding-left: 1em;


}
body{
  display: flex;
}
aside{
  display: inline-flex;
  color: white;
  font-size: 2em;
  width: 50%;
  height: 100%;
}
#body h1{
  color: white;
  margin-left: auto;
  margin-right: auto;
  font-size: 5em;
  text-align: center;

}

<div id= wrap>
		<header>
			<img src = "Images\Great Art logo for em.jpg" alt="Great Art Logo"> </img>
		</header>
		<nav>
			<ul>
				<li><a href="index.html">home</a></li>
				<li><a href="Gallery.html">gallery</a></li>
				<li><a href="artist biography.html">artist biography</a></li>
				<li><a href="blog.html">blog page</a></li>
				<li><a href="about us.html">About us</a></li>
				<li><a href="contact us.html">contact us</a></li>
			</ul>
		</nav>
		<div id= body>
			<h1>Artist Biography</h1>
			<div id= leftSide>
				<p>Vincent van Gogh, one of the most well-known post-impressionist artists, for whom color was the chief symbol of expression, was born in Groot-Zundert, Holland on March 30, 1853.
					The son of a pastor, brought up in a religious and cultured atmosphere, Vincent was highly emotional, lacked self-confidence and struggled with his identity and with direction.
					He believed that his true calling was to preach the gospel; however, it took years for him to discover his calling as an artist. Between 1860 and 1880, when he finally decided to
					become an artist, van Gogh had already experienced two unsuitable and unhappy romances and had worked unsuccessfully as a clerk in a bookstore, an art salesman, and a preacher in the
					Borinage (a dreary mining district in Belgium) where he was dismissed for overzealousness.
				</p>
			</div>
		</div>
		<footer>
			<p> Great Art </p>
			<address> PO Box 12-345 Christchurch </address>
			<p id =phone> Phone: 03 345 6789 </p>
			<p id= email> Email: hubert@great-art.org.nz </p>
			<img src= "Images\fb-art.jpg"</img>
			<img src= "Images\twitter logo.png"</img>
		</footer>
	</div>

为您的 footer 元素声明 left 和 right 值。

CSS

footer {
    display: flex;
    position: absolute;
    bottom: 0px;
    width: 40em;
    margin-left: auto;
    margin-right: auto;
    height: 3em;
    background-color: light grey;
    padding-top: 1em;
    border-top: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
    left: 0;
    right: 0;
}