0
我正在使用一個着陸頁，其中有一個藍色英雄箭頭指向內容區域。我希望在用戶最小化瀏覽器窗口大小時使其居中對齊，但我似乎無法使用我當前的設置。需要在響應式設計中集中英雄箭頭
* {
margin: 0px;
}
body {
width: 1024;
border-size: 3px;
border-color: gray;
}
/*Blue header*/
.whiteheadline {
font-size: 48px;
font-family: "Open Sans";
color: rgb(255, 255, 255);
font-weight: bold;
}
.header-rectangle {
background-color: rgb(104, 115, 251);
text-align: center;
line-height: 143px;
width: 1024px;
position: relative;
margin: 0 auto;
}
#header-bg {
background-image: url(http://ppc-genius.com/wp-content/uploads/2015/11/sliceimage.png);
background-repeat:no-repeat;
height:426px;
width: 1024px;
position: relative;
margin: 0 auto;
z-index: 1;
overflow:auto;
}
/*CTA Rectangle and form*/
#cta-rectangle {
background-color: rgb(224, 223, 223);
box-shadow: 0px 9px 11.18px 1.82px rgba(0, 0, 0, 0.55);
position: relative;
width: 451px;
height: 334px;
z-index: 2;
margin: 40px auto;
}
/*Hero separator and testimonial text*/
.hero { \t
\t position:relative;
\t background-color: rgb(104, 115, 251);
\t height:128px;
\t width:1024px;
margin: 0 auto;
text-align:center;
}
.hero:after {
\t content:'';
position: absolute;
top: 100%;
left: 0;
right: 0;
margin: 0 auto;
width: 0;
height: 0;
border-top: solid 50px rgb(104, 115, 251);
border-left: solid 50px transparent;
border-right: solid 50px transparent;
}
.hero-quote {
font-size: 26px;
font-family: "Open Sans";
color: rgb(255, 255, 255);
font-style: italic;
line-height: 1.2;
text-align: center;
position: absolute;
width: 989px;
height: 88px;
padding-top: 15px;
}
/*Body content and images*/
.body-container {
width: 1024px;
margin: 0 auto;
margin-top: 60px;
}
.body-container h1 {
font-size: 36px;
font-family: "Open Sans";
color: rgb(0, 0, 0);
line-height: 1.2;
text-align: left;
position: absolute;
width: 548px;
height: 37px;
margin: 0 auto;
}
.text-container-1 {
max-width: 544px;
}
.text-container-1 p {
font-size: 18px;
font-family: "Open Sans";
color: rgb(0, 0, 0);
line-height: 1.2;
text-align: left;
padding-top: 8px;
padding-left: 4px;
}
/*Check marks and header*/
.check-mark-header {
background-color: rgb(224, 223, 223);
position: relative;
width: 907px;
text-align: center;
margin: 0 auto;
}
.check-mark-header h1 {
font-size: 30px;
font-family: "Open Sans";
color: rgb(0, 0, 0);
line-height: 1.2;
text-align: left;
position: absolute;
width: 548px;
height: 37px;
margin: 0 auto;
} <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
\t <meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="generator" content="Webinar Event Landing Page by Eric Conklin">
<meta name="description" content="">
<meta name="keywords" content="">
\t <link href="css/bootstrap.min.css" rel="stylesheet">
\t <link rel="stylesheet" type="text/css" href="style.css">
<title>Event Lander</title>
</head>
<body>
<!--Blue Header-->
<div class="header-rectangle">
\t <h1 class="whiteheadline">Join Us for a Free Webinar!</h1>
</div>
<!--Header image and form-->
<div id="header-bg" align="center">
\t <div id="cta-rectangle">
\t \t \t <h1>Hello!</h1>
\t </div>
</div>
<!--Hero-->
<div class="hero">
\t <h1 class="hero-quote">「I can’t thank you enough for your coaching and support. My business has never been more profitable or easier to manage. Thank you!」 <br> -Jim Smith</h1>
</div>
<!--Section for content-->
<section class = "body-container">
\t <div class="container">
\t \t <div class="row">
\t \t \t \t <div class="col-md-4">
\t \t \t \t \t \t <img class="img-responsive" src="img/jane.png" />
\t \t \t \t </div>
\t \t \t \t <div class="col-md-8">
\t \t \t \t \t \t <div class="text-container-1">
\t \t \t \t \t \t \t <h1>Hello! My Name is Jane Smith!</h1><br><br>
\t \t \t \t \t \t \t <p>I’m an experienced and certified AdWords professional. I lead a monthly mastermind group of like-minded business owners and consultants. We use webinars to teach the principals of campaign development, including keyword research, split-testing, tracking, reporting and optimization.</p><br>
\t \t \t \t \t \t \t <p>Going it alone is rough and boring. We lead these webinars as a free training and networking opportunity to help like-minded individuals achieve sucess in their busineses and see results like never before.</p><br>
\t \t \t \t \t \t \t <p>Not only does this give me the opportunity to teach, it also gives me the opportunity to learn by hearing your story, learning about your business and helping share amazing ideas with fellow entrepreneurs.</p><br>
\t \t \t \t \t \t </div>
\t \t \t \t </div>
</div>
</div>
</section>
<!--Checkboxes and lower page content-->
<section class="checkmarks">
\t <div class="check-mark-header" align="center">
\t \t \t <h1>Ready to Get Started? Here's What's Included</h1>
\t \t \t
\t </div>
</section>
\t <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
\t <!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
好了，問題是我想爲整個頁面中的最大寬度，所以這是行不通的。它使它成爲一個全寬頁面，這不是我想要的。 –
你可以修改它在具有上述預定寬度的身體中嗎？ –
你正在使用引導程序，並在'container'類中包裝東西將把它包含到斷點大小。 http://getbootstrap.com/css/#overview-container –