Question

我试图获取一个图像，一些文本和一个容器div中的表单，使其居中而不是左对齐，但是当我尝试浮动图像时，它只是向右或向左移动，文本全部显示搞砸了。

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

Answer 1

将此添加到您的CSS：

#container {
    text-align: center;
}

如果您不希望所有内容都以这种方式居中，只需打包您执行的内容并为容器添加text-align: center。

Answer 2

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

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

无法在div中获取内容到页面中心？

2 个答案: