0
我是Bootstrap的新手，所以我不太了解它。引导程序将div中的内容对齐
基本上，在一列内，我希望内部的内容更多地移向中心（垂直和水平）。
我希望能在这方面得到一些帮助。
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<!-- IE Edge Meta Tag -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<title>title</title>
<link rel="stylesheet" href='https://fonts.googleapis.com/css?family=Open+Sans:300' />
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<!-- page content -->
<div class="navbar navbar-inverse">
<div class="container">
<div class="navbar-header">
<img class="navbar-brand" src="img/Dhub%20Logo-01.png">
<button type="button" class="navbar-toggle" data-
toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapsed navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li><a href="#">Help</a></li>
<li><a href="#">Document Library</a></li>
<li><a href="#">Contact us</a></li>
<li><a href="#">Register your account</a></li>
<li><a class="login-colour" href="#">Login</a></li>
</ul>
</div>
</div>
<div id="first-background">
<!-- <img src="img/shutterstock_170790012.jpg" /> -->
<div class="container">
<div class="row">
<div class="col-md-6">
<h1 class="big-header">Concentrate on the important things in life</h1>
<p class="light-text bold">You can now pay your ground rent using a debit card from our Tenant Portal without incurring any processing fees</p>
<p class="light-text">From the portal you can also get access to all your legal documentation and even your lease, completely free of charge.</p>
<div class="button button1">Register your account</div>
<div class="button button2">See how it works</div>
</div>
</div>
</div>
</div>
<div id="second-background">
<div class="container">
<div class="row">
<div class="col-md-6">
<h1 class="big-header">Finger tip control of your online account</h1>
<p class="dark-text bold">Our secure online payments system by Sagepay saves you time
and effort. You can settle ground rent payments directly and view your live account
details</p>
<p class="dark-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi non quis exercitationem culpa nesciunt nihil aut nostrum explicabo reprehenderit optio amet ab temporibus asperiores quasi cupiditate. Voluptatum ducimus voluptates voluptas?</p>
<div class="button button1">Register your account</div>
<div class="button button3">See how it works</div>
</div>
</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="js/script.js"></script>
</body>
</html>
CSS
.navbar {
border-radius: 0px;
/*For some reason, CDN had a border-radius of 4px, so I changed it back to 0px */
background-color: rgb(0, 0, 0);
}
.navbar-inverse .navbar-nav > li > a.login-colour {
color: rgb(134, 193, 3);
}
#first-background {
background-image: url('../img/shutterstock_170790012.jpg');
background-size: 100% ;
-o-background-size: 100%;
-webkit-background-size: 100%;
-khtml-background-size: 100%;
-moz-background-size: 100%;
height: 1000px;
background-repeat: no-repeat;
}
#second-background {
background-color: rgb(255, 255, 255);
background-size: 100% ;
-o-background-size: 100%;
-webkit-background-size: 100%;
-khtml-background-size: 100%;
-moz-background-size: 100%;
height: 1000px;
background-repeat: no-repeat;
}
.button {
display: inline-block;
border-radius: 20px;
height: 35px;
text-align: center;
padding-top: 4px;
}
.button1 {
border-style: solid;
border-color: rgb(134, 193, 3);
color: rgb(255, 255, 255);
background-color: rgb(134, 193, 3);
width: 17em;
}
.button2 {
border-style: solid;
border-color: white;
color: rgb(255, 255, 255);
width: 12em;
}
.button3 {
border-style: solid;
border-color: rgb(77, 77, 77);
color: rgb(51, 51, 51);
width: 12em;
border-width: 2px;
}
.col-centered {
display:inline-block;
float:none;
/* reset the text-align */
text-align:left;
/* inline-block space fix */
margin-right:-4px;
}
#first-background .big-header {
color: rgb(134, 193, 3);
}
#second-background .big-header {
color: rgb(51, 51, 51);
}
.light-text {
color: rgb(255, 255, 255);
}
.dark-text {
color: rgb(51, 51, 51);
}
.bold {
font-weight: 600;
}
感谢。
你到底要什么???中心 – HTMLNoob
col-md-6 div内的内容。 – Chosen1