无法将 div 中的内容放在页面中心？答案

【问题标题】：Can't get content in a div to center on page?无法将 div 中的内容放在页面中心？
【发布时间】：2017-02-15 21:32:00
【问题描述】：

我正在尝试让容器 div 中的图像、一些文本和表单居中而不是左对齐，但是当我尝试浮动图像时，它只是向右或向左移动，文本得到所有搞砸了。

.header, .navBar, .pageTitle {
   margin: 0px;
   padding: 0px;
}
body {
   margin: 0px;
   padding: 0px;
   font-size: 20px;
   background-color: #006464;
}
footer {
   background-color: #bfd8d8;
   position: absolute;
   bottom: 0px;
   width: 100%;
   font-size: 15px;
   border: 1px solid black;
}
nav, h1, h2 {
   font-family: arial, sans-serif;
}
nav a:hover {
   background-color: #006400;
}
nav a {
   color: white;
   text-decoration: none;
}
h2 {
   text-align: center;
   background-color: white;
}
#container {
   width: 1000px;
   margin: auto;
   min-height: 100vh;
   position: relative;
}
#signUp {
   color: white;
   font-size: 20px;
   font-family: arial;
}
#welcomeFont {
   color: white;
   font-size: 25px;
   font-family: arial;
}
.currentNav {
   background-color: #006400;
}
.emailStyle {
   font-weight: bolder;
}
.footerSpacer {
   height: 50px;
}
.header {
   color: white;
   background-color: #006400;
   padding: 20px;
}
.headerAnchor {
   text-decoration: none;
   color: white;
}
.navBar {
   background-color: #228B22;
   padding: 10px;
}
.pageTitle {
   padding-bottom: 0px;
   box-shadow: 0px 8px 25px 0px;
   background-color: #bfd8d8;
}
.poetryAuthor {
   color: white;
   font-size: 15px;
   font-family: arial;
   font-style: italic;
}
.poetryCaptions {
   margin-top: 50px;
   color: white;
   font-size: 25px;
   font-family: georgia, serif;
}
.resizeAbout {
   max-height: 50%;
   max-width: 50%;
   margin-top: 50px;
   margin-bottom: 50px;
}
.resizeHome {
   max-height: 50%;
   max-width: 50%;
   margin-top: 50px;
}
.resizePhotos {
   max-height: 50%;
   max-width: 50%;
}
.table {
   background: #006464;
   max-width: 100%;
   border: 1px solid black;
   border-spacing: 10px;
   margin-left: auto;
   margin-right: auto;
}
.tableData {
   font-size: 19px;
   background: #bfd8d8;
   border: 1px solid black;
   padding: 8px;
}

<!DOCTYPE html> 
<! Must have tables, forms, multimedia, and links >
<head>
<title>Home - The Singular Effect</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id="container">
  <header>
    <h1 class="header"><a class="headerAnchor" href="index.html">TheSingularEffect.Com</a></h1>
  </header>
  <nav class="navBar"> <a class="currentNav" href="index.html">Home</a> <a href="music.html">Music</a> <a href="photos.html">Photos</a> <a href="poetry.html">Poetry</a> <a href="about.html">About</a> </nav>
  <h2 class="pageTitle"> Get the Full Effect! </h2>
  <a href="image/homepage.jpg" target="blank"><img class="resizeHome" src="image/homepage.jpg" alt="Image of Daniel Adams"></a>
  <h3 id="welcomeFont"> Welcome to the home of The Singular Effect! </h3>
  <br>
  <form>
    <span id="signUp">Sign up for our newsletter!</span> <br>
    <input type="text" name="emailaddress" value="Email Address">
    <input type="submit" value="submit">
  </form>
  <div class="footerSpacer"> </div>
  <footer> &copy; 2016, Chris Hughes - SNHU. Contact me at <span class="emailStyle">christopher.hughes1@snhu.edu</span> </footer>
</div>
</body>

【问题讨论】：

请少用代码。确定哪一部分是相关的。

标签： html css css-float centering

【解决方案1】：

将此添加到您的 CSS：

#container {
    text-align: center;
}

如果您不希望所有内容都以这种方式居中，只需包装您所做的内容并为容器提供text-align: center。

【讨论】：

【解决方案2】：

在您的正文标签中添加text-align:center。试试看。

body {
   text-align:center;
   margin: 0px;
   padding: 0px;
   font-size: 20px;
   background-color: #006464;
}

【讨论】：