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

您只需从float: left; css选择器中移除display: inline;和#content即可。

Answer 2

从float:left;移除#content并向其添加display:block;。这应该是它的中心。

Answer 3

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

display: inline;
float: left;

Answer 4

将内容样式更改为

显示：内联;

我如何集中本网站的内容？

4 个答案: