我试图让这些 div 在页面上居中。如您所见，右侧有一些空白区域。我试过操纵盒子模型，即边距和填充，但无法弄清楚如何操纵右侧。我使用的是 col-md-5 吗？
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="animate.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link href="style.css" rel="stylesheet">
<link rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Roboto|Merriweather|Europa">
</head>
<body>
<div class = "header">
<div class ="container-fluid">
<h1 id = "firstName">Header</h1>
</div>
<div class="container-fluid">
<div class="row">
<div class = "col-md-5">tile 1</div>
<div class = "col-md-5">tile 2</div>
<div class = "col-md-5">tile 1</div>
<div class = "col-md-5">tile 2</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="js/main.js"></script>
html, body {
font-family:;
margin:0 auto;
padding:0px;
text-transform: none;
font-family: Europa;
letter-spacing: 0.5px;
}
.header h1 {
background-color: none;
margin: 30px;
}
.row {
margin: 0 auto;
}
.container-fluid {
padding:0;
margin:0 auto;
}
.col-md-5 {
background-color: red;
margin: 30px;
width:%;
text-align:center;
}
最佳答案
html, body {
font-family:;
margin:0 auto;
padding:0px;
text-transform: none;
font-family: Europa;
letter-spacing: 0.5px;
}
.header h1 {
background-color: none;
margin: 30px 0;
}
.row {
margin: 0 auto;
}
.container-fluid {
padding:0;
margin:0 auto;
}
.col-md-6 {
margin-bottom: 15px;
width: 50%;
float: left;
text-align:center;
padding: 0;
}
.col-md-6 .wrapper{
padding: 15px;
background-color: red;
}<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="animate.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link href="style.css" rel="stylesheet">
<link rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Roboto|Merriweather|Europa">
</head>
<body>
<div class = "header">
<div class ="container-fluid">
<h1 id = "firstName">Header</h1>
</div>
<div class="container-fluid">
<div class="row">
<div class = "col-md-6"><div class="wrapper">tile 1</div></div>
<div class = "col-md-6"><div class="wrapper">tile 2</div></div>
<div class = "col-md-6"><div class="wrapper">tile 3</div></div>
<div class = "col-md-6"><div class="wrapper">tile 4</div></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="js/main.js"></script>关于html - 如何使行中的div居中？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46073342/