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

问题描述 投票:0回答:1

我正试图找出一种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。

css wordpress alignment center
1个回答
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;
 }

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

© www.soinside.com 2019 - 2024. All rights reserved.