Question

我在网上看到了很多关于将内容集中在页面上的“简单”的演示。我想出了如何让我的标题占据浏览器窗口的整个宽度，但每当我尝试将我的内容集中时，我的所有浏览器都会扩展页面的宽度，所以我最终得到了一个水平滚动条。另一个问题是我的标题颜色与浏览器的其他颜色不同，所以当我对主体进行更改时，它会改变标题的宽度，使颜色不会填满窗口。这个网站是我想要实现的一个很好的例子http://carlodiego.businesscatalyst.com/

我也希望我的标题有溢出：无;因此，如果某人使浏览器窗口变小，则标题开始消失。无论我做了什么别的休息，我一直在努力工作几个小时。以下是我的代码。对不起，但这很冗长。

<body>
<header>
    <div id="wrapper">
        <div id="fixed">
            <div id="menu-container">
                <ul id="navigationMenu">
                    <li><a href="#" class="normalMenu">Home</a></li>
                    <li><a href="#" class="normalMenu">About</a></li>
                    <li><a href="#" class="normalMenu">Work</a></li>
                    <li><a href="#" class="normalMenu">Contact Me</a></li>
                </ul>
            </div>
            <div id="title">
            <h1>Alex</h1>
            <h1 id="last">Chaparro</h1>
            </div>
        </div>

</header>

        <div id="background">

        <div id="front-end">
           <h1>Front-End <br> Developer</h1>
        </div>
        <div id=content>

            <h1 class="heading">About</h1>
            <p>content</p>

            <h2>Currently Using</h2>
            <p>More Content...</p>

            <h2>Currently Following</h2>
            <p>Chris Mills | David Sawyer Mcfarland | Phil Thompson </p>

            <h1 class="heading">Work</h1>

        </div>
      </div>
</div>
</body>


body {
    margin: 0;
    padding:0;
    border: 0;
    font-size: 100%;
    line-height: 1.5;
    font-family: 'optimusprincepssemiboldRg';
    background: #fafafa;

    background-color: #eeeeee;
    }



article, aside, audio, canvas, datalist, details, figcaption, figure, footer, header, hgroup, menu, nav, section, video {
    display: block;
}

#title {
    font-family: 'optimusprincepssemiboldRg';
    color: black;
}

#last {
    font-size: 400%;
    line-height: 0;
    margin-top: 40px;
}

#menu-container {
    position: absolute;
    margin-left: 420px;
    white-space: nowrap; /* stops text from wrapping */
    overflow: hidden;
}

#background {
    background-color: #eeeeee;
    position: absolute;
    height: 100%;
    margin-top: 20px;
    margin-left: 20%;
    margin-right: 20%;
}

#front-end {
    margin-top: 100px;
    font-size: 200%;
    width: 100%;
    text-align: center;
}

.heading {
    font-size: 300%;
}

#fixed {
    position: relative;
    height: 200px;
}

header {
    width: 100%;
    overflow: hidden; /*This stops the color from going away*/
    background-color: #cee3ee;
}

#wrapper {
    margin-left: 20%;
    margin-right: 20%;
}

Answer 1

您希望拥有header和main div。并使它们absolute定位。并使用margin:0px auto;将主要居中。

像这样http://jsfiddle.net/WAR4r/

如何使我的页面居中，同时使我的标题占据浏览器窗口的整个宽度？

1 个答案: