css - 学习构建 tumblr 主题，无法集中注意力——实际上只是把事情搞得一团糟

Question

如果它工作得很好 - 然后设法通过添加外部容器来尝试取出已弃用的中心标签来搞砸它。我尝试使用相对定位、自动边距、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;
            }

Answer 1

您在那个页面上遇到了很多问题，太多了，无法在此处进行调试。但是，要启动一个位于中心的容器的网站，您可以执行以下操作:

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

我建议您在 CodeAcademy 上回顾一下 CSS 的基础知识，这会解决您的很多问题。