Question

我一直试图绞尽脑汁为什么我似乎无法将任何属性应用到我的H1标签......我无法让它工作并开始尝试设置边框所以我可以看到这个部分实际上在哪里。但我甚至无法让边界出现在该部分。最初可能认为你可能不会在一个区域周围放置一个边界，因为它可能更像是一个隐喻组合，而不是一个真实的＆＃34;物理＆＃34;分组...然后我尝试将它放在div标签和文章标签中，我仍然没有成功...

<html>
<head>
    <link type="text/css" rel="stylesheet" href="style.css" />
</head>
<body>
    <section id="under_banner"></section>
    <section id="main_pic"></section>
    <section id="title">
            <h1>The Adventures of Chris Wakeling!</h1>
    </section>
</body>
</html>

CSS就是......

/* Basic Underlay */ 
html {
background-color: #03113D;
z-index: -2;
}
#under_banner {
border-radius: 5px;
background-image: url("images/sydney.jpg");
background-position: 0px -180px;
background-size: cover;
margin: 0px auto;
height: 350px;
width: 1100px;
z-index: -1;
}   

/* Main Body */
#main_pic {
background-color: #000;
width: 550px;
height: 600px;
}
h1 {
text-align: center;
width: 550px;
height: 600px;
margin: auto;
border: 1px solid #999;
background-color: white;
}

基本上，如果你打开JSFiddle中的代码，结果会因图片而出现空白区域。但我想要＆＃34; Chris Wakeling的冒险＆＃34;以中心为主。

任何帮助将不胜感激......

提前干杯。

Answer 1

添加此css样式

#title h1 {
  margin: 0 auto;
}

它将使你的h1成为中心。

将大括号}添加到#under_banner

Answer 2

标题以身体为中心，但<section id="under_banner"></section> = width: 1100px;大于身体不是。

您可以将body {width: 1100px;}和最大#title置于中心

   <body>
            <section id="under_banner"></section>
            <section id="main_pic"></section>
            <h1 id="title">The Adventures of Chris Wakeling!</h1>
    </body>

CSS

/* Basic Underlay */ 
body {
    background-color: #03113D;  
    }
#under_banner {
    border-radius: 5px;
    //background-image: url("images/sydney.jpg");
    background-color: red;
    background-position: 0px -180px;
    background-size: cover;
    margin: 0px auto;
    height: 350px;
    width: 1100px;
    z-index: -1;
}
#main_pic {
    background-color: #000;
    width: 550px;
    height: 600px;
    }
#title {
    text-align: center;
    color: white;
    width: 550px;
    margin: 0 auto;
    border: 1px solid #999;
    background-color: #000;
    }

Answer 3

在这里查看一些布局修改。我认为这是你可能想要实现的目标。

JSFiddle

<body>
<section id="under_banner">Under Banner</section>
<div id="wrapper">
    <section id="main_pic">Main Picture Section</section>
    <section id="title">
        <article>
                <h1>The Adventures of Chris Wakeling!</h1>

        </article>
    </section>
</div>

问题是，除非你给出一个参考框架，例如宽度为中心，否则它会使块仅保持所需的大小。在需要保持包含的元素周围添加一个包装器（我注意到你的横幅预期很宽）可以帮助你保留一个引用来恢复。

试图让我的H1居中...... JSFiddle包括在内

3 个答案: