如何使本网站的内容居中？答案

【问题标题】：How do I center the content of this website?如何使本网站的内容居中？
【发布时间】：2013-06-17 16:15:14
【问题描述】：

所以我一直在为一项任务创建一个网站，但由于某种原因，我似乎无法调整网站的内容。这是一个简单的布局。它是纯粹的内容，没有侧边栏或任何东西。这是内容的 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;

}

提前谢谢大家。我正在尝试将内容的图像与背景的图像对齐，以使其具有渐变效果，但无法使内容居中。

【问题讨论】：

标签： html css layout center

【解决方案1】：

将内容样式改为

显示：内联；

【讨论】：

【解决方案2】：

您所要做的就是从#content css 选择器中删除float: left; 和display: inline;。

【讨论】：

非常感谢。第一年编码。

【解决方案3】：

从#content 中删除float:left; 并将display:block; 添加到其中。那应该居中。

【讨论】：

@EstebanRodriguez，如果这回答了您的问题，请将其标记为已回答。

【解决方案4】：

从 CSS #content 中删除以下内容：

display: inline;
float: left;

【讨论】：

感谢您的提醒和简单的解释。