html - 如何使本网站的内容居中？

Question

所以我一直在为一项任务做一个网站，但出于某种原因，我似乎无法对齐网站的内容。这是一个简单的布局。它是纯内容，没有侧边栏或任何东西。这是内容的 HTML:

     <!-- Begin Content Column -->
     <div id="content">

          <img src="img8.png" style="width: 460px; height: 100px;" alt="pokemon">
          <br>Pokemon:
          The First Movie 
          <br>Soundtracks

     </div>
     <!-- End Content Column -->

这是 CSS:

body {
background: black;
font-family: Trajan Pro,Arial, Helvetica, sans-serif;
font-size: 28px;
text-align: center;
background-image: url('img2.jpg');
background-repeat: repeat-x;
background-position: bottom center;
background-size: 460px 300px; 

}

#content { 
float: left;
color: #333;
border: 1px solid #ccc;
background: transparent;
margin: 0 auto;
height: 1024px;
width: 460px;
display: inline;

}

提前谢谢大家。我正在尝试将内容的图像与背景的图像对齐以产生淡入淡出的效果，但无法使内容居中。

Answer 1

将内容的样式改为

显示:内联；