学习构建tumblr主题，难以集中

学习构建tumblr主题，难以集中 - 实际上只是在一般情况下造成了很大的混乱(Learning to build tumblr themes, having trouble centering - actually just made a big mess in general)

如果它工作得很好 - 然后设法弄乱它试图通过添加外部容器取出已弃用的中心标签。 我已经尝试使用相对定位，自动边距，50％边距所有内容，我发现建议。 我认为可能真正的问题是我设置了一个错误的东西，所以无论我在其他地方做什么它都行不通。 显然现在它是一个完整的集群。 真的想学习（这是我尝试从头开始构建的第一件事）所以不想只复制一个工作主题的例子 - 想弄清楚这个有什么问题。 任何建议表示赞赏

calliopecompendium.tumblr.com

CSS

<style type="text/css"> /*major elements*/ body { margin: 0; padding: 0; background:{color:Background}url('{image:Background}'); color: {color:Body text}; font-family: {font:Body}; font-size: {text:Font size}; } article { margin: {text:Post margin}; padding: 2%; width: 20%; } a { color: {color:Body links}; text-decoration: none; } iframe, img, embed, object, video { padding: 5%; max-width: 90%; overflow:hidden; } img { height: auto; width: auto; } /*id*/ /*containers*/ #container{ width:1200px; position:fixed; } #header{ width:1000px; position:relative; } #content{ width:1000px; position:relative; } #tags, nav ul, .chat ul { list-style: none; list-style-image: none; margin: 0; padding: 2px; } /*masthead*/ #masthead { background: url('{image:Masthead}'); background-repeat: no-repeat; height:350px; } #masthead img { display: block; position:absolute; top:20px; } #masthead p { position:absolute; top:300px; } /*menu*/ #menu { position:relative top: 0px; background-color:{color:Masthead menu}; width:1000px; height:36px; list-style:none; } #menu li { display: inline; } #menu li a { display: block; padding: 10px; text-decoration: none; font-weight: bold; color: #fcebb6; } #menu li a:hover { background-color: #f7d11f; color: #f08818; }

Had it working nicely - then managed to mess it up trying to take out the deprecated center tags by adding an outside container. I've tried to use relative positioning, auto margins, 50% margins all the things for centering that I've found suggested. I think probably the real problem is that I set one thing wrong and so no matter what I do elsewhere it won't work. Obviously now it is a complete cluster. Really looking to learn (this is the first thing I've tried to build from scratch) so didn't want to just copy an example of a working theme - wanted to figure out what is wrong with this one. Any advice appreciated.

calliopecompendium.tumblr.com

CSS

<style type="text/css"> /*major elements*/ body { margin: 0; padding: 0; background:{color:Background}url('{image:Background}'); color: {color:Body text}; font-family: {font:Body}; font-size: {text:Font size}; } article { margin: {text:Post margin}; padding: 2%; width: 20%; } a { color: {color:Body links}; text-decoration: none; } iframe, img, embed, object, video { padding: 5%; max-width: 90%; overflow:hidden; } img { height: auto; width: auto; } /*id*/ /*containers*/ #container{ width:1200px; position:fixed; } #header{ width:1000px; position:relative; } #content{ width:1000px; position:relative; } #tags, nav ul, .chat ul { list-style: none; list-style-image: none; margin: 0; padding: 2px; } /*masthead*/ #masthead { background: url('{image:Masthead}'); background-repeat: no-repeat; height:350px; } #masthead img { display: block; position:absolute; top:20px; } #masthead p { position:absolute; top:300px; } /*menu*/ #menu { position:relative top: 0px; background-color:{color:Masthead menu}; width:1000px; height:36px; list-style:none; } #menu li { display: inline; } #menu li a { display: block; padding: 10px; text-decoration: none; font-weight: bold; color: #fcebb6; } #menu li a:hover { background-color: #f7d11f; color: #f08818; }

最满意答案

你在那个页面上遇到了很多问题，这里要调试太多了。 但是，要创建一个位于中心的容器的网站，您将执行以下操作：

.container { width: 960px; margin: 0 auto; }

我建议回到CodeAcademy上的CSS基础知识，这将解决你的很多问题。

You've got a lot of problems on that page, far too many to debug here. But, to start a website with a container that's in the center you would do the following:

.container { width: 960px; margin: 0 auto; }

I would recommend going back over the basics of CSS on CodeAcademy, that would solve a lot of your problems.