Question

我正试图找出一种CSS方式来集中我的内容。这是我的网站：http://www.thegrassrootsgarage.com/?preview_id=41&preview_nonce=58439a219d&_thumbnail_id=-1&preview=true。

请注意内容如何粘贴到主页的左侧？我想在我的CSS的#wrapper＃main-content中保持720像素宽度，但我不确定如何对内容进行居中对齐并让它出现在屏幕中间。我想让左对齐的文本（文本将保持左对齐，因为内容将居中）从中心开始。我已经尝试过text-align，align-content，margin：0以及其他一些内容，但我可能会将其放置错误，因为我还没有完全熟悉这个特定的CSS页面。

最终，文本将左对齐，内容将位于中心。我试图改变内容本身的位置，它应该采用文本（它仍将与文本左对齐）。有什么想法吗？

以下是我网站和Wordpress主题的一些主要CSS：

#header,
#main-content,
#wrapper-footer {
  float: left;
  height: auto;
  position: relative;
  width: 100%;        
}     
#wrapper #main-content {
  padding: 28px 28px 10px;
  width: 720px;         
}
#content {
  float: left;
  width: 750px;       
}

我能够将#wrapper＃main-content的宽度从956px更改为720px，这大约是我想要的内容大小，但我希望它居中！我不知道该怎么做，如上所述，我尝试了各种方法。也许我为这个特定的目的编辑了错误的项目？

当然，如果需要，我可以提供我当前拥有的其余CSS。

Answer 1

我注意到你的style.css在你的主要内容上声明了一个浮动。也许这是因为通常在那里有一个侧边栏。一个简单的解决方案是：

#wrapper #main-content {
     padding: 28px 28px 10px;
     width: 720px;
     margin: 0 auto; //<-- added this line
     float: none; //<-- added this line
}

您必须确保在页面上的其他样式声明之后出现这种情况。

<强>已更新

非常正确。它会影响每一页。在主题的正文类中，它会打印帖子的page-id- {number}。因此，您可以为此页面提供非常具体的CSS，或为您选择的任何其他页面创建非常具体的CSS。这应该有效：

 .page-id-41 #main-content {
     float: none;
     margin: 0 auto;
 }

旁注 - 我不小心将答案添加到您的初始问题中 - 但我已将其删除并在此处添加

在Wordpress中使用主题CSS中心内容的方法？

1 个答案: