我的问题是我有一个div（id = service-section-container），其中包含3个div（class = service-section），这些div移到了其父div的左侧。我还没有找到一种有效的方法来使用边距将一组子div居中，因为使用像素会在不同的屏幕上产生不同的结果，而百分比却无法解决问题。
这可能是一个简单的修复程序，由于缺乏经验，我无法解决，因此为什么我会非常感谢您的帮助。
可以在以下链接找到示例：http : //jsfiddle.net/6tob3q1z/2/
注意：您可能需要放大小提琴以了解我在说什么，因为有问题的div（服务部分）在1000px处将重新定位在彼此之上
HTML：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE-edge">
<meta name="viewport" content="width-device-width", initial-scale=1>
<title> Learning Bootstrap</title>
<link rel="stylesheet" type="text/css" href="style.css">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" integrity="sha512-dTfge/zgoMYpP7QbHy4gWMEGsbsdZeCXz7irItjcC3sPUFtf0kuFbDz/ixG7ArTxmDjLXDmezHubeNikyKGVyQ==" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css" integrity="sha384-aUGj/X2zp5rLCbBxumKTCw2Z50WgIr1vs/PFN4praOTvYXWlVyh2UtNUU0KAUhAX" crossorigin="anonymous">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<!------------------------Menu------------------------>
<nav id="menu-bar" class="navbar navbar-default" role="navigation"><!--The menu bar-->
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-container"><!--Menu bar toggle-->
<span class="sr-only">Show and hide the navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button><!--End of Menu bar toggle-->
<a class="navba-brand" href="#">
<img src="images/hexagon.PNG" width="40px">
</a>
</div>
<div class="collapse navbar-collapse" id="navbar-container">
<ul class="nav navbar-nav pull-right" > <!--Menu bar ul-->
<li ><a href="#">Home</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">About-us <span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Work</a></li>
<li><a href="#">History</a></li>
<li><a href="#">Team</a></li>
<li class="divider"></li>
<li><a href="#">Driving directions</a></li>
</ul>
</li>
<li><a href="#">Contact</a></li>
</ul><!--End of menu bar UL-->
</div>
</div>
</nav><!--End of menu bar-->
<header id="cover">
<h1 class="site-name">Hello Clarice</h1>
<h4 class="slogan">It's nice to see you again.</h4>
</header>
<!------------------------End of menu------------------------>
<!------------------------Services------------------------>
<div id="service-section-container" class="row">
<div id="section-title">
<h1>Services</h1>
</div>
<div class="service-section col-md-4 ">
<h4>Web design</h4>
<p>This is a jumbotron class. It would span the width of a single column.</p>
<div class="button-container">
<button class="btn btn-default">Read more</button>
</div>
</div>
<div class="service-section col-md-4">
<h4>Online Marketing</h4>
<p>This is a jumbotron class. It would span the width of a single column.</p>
<button class="btn btn-default">Read more</button>
</div>
<div class="service-section col-md-4">
<h4>IT Consultancy</h4>
<p>This is a jumbotron class. It would span the width of a single column.</p>
<button class="btn btn-default">Read more</button>
</div>
</div>
<div class="row footer">
<p class="glyphicon glyphicon-copyright-mark pull-right">Copyright</p>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js" integrity="sha512-K1qjQ+NcF2TYO/eI3M6v8EiNYZfA95pQumfvcVrTHtwQVDG+aHRqLi/ETn2uB+1JqwYqVG3LIvdm9lj6imS/pQ==" crossorigin="anonymous"></script>
</body>
</html>
CSS：
html, body{
height:100%;
margin:0;
}
@font-face{
font-family:josefin;
src: url('fonts/JosefinSans-Regular.ttf');
}
#cover{
background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 59%, rgba(0, 0, 0, 0.65) 100%), url('background.jpg') no-repeat;
height: 494px;
height:100vh;
background-size:cover;
display: flex !important;
flex-direction:column;
justify-content:center;
align-items:center;
/*margin-bottom:10px;*/
}
h1, h4{
margin:0;
}
.row{
}
.footer{
margin:0 !important;
background-color:#ECF0F1;
}
p{
margin:0 auto 20px !important;
max-width:600px !important;
}
#menu-bar{
margin-bottom:0 !important;
position:absolute;
display:block;
width:100%;
background:rgba(255, 255, 255, 0);
border:0px;
box-shadow: none;
}
#menu-bar a{
color:black !important;
}
/**********************Services section**********************/
#service-section-container{
margin:0px;
background-color: #F2F1EF;
height:100%;
width:100%;
display:inline-block;
}
.service-section p, button{
margin:10px !important;
}
#section-title{
display: flex !important;
justify-content:center;
align-items:center;
border-radius: 10px;
}
#section-title h1{
text-align:center;
border:1px solid #D2D7D3;
border-radius:2px;
margin:40px 10px 20px 10px !important;
padding:20px;
}
.service-section{
border-radius:2px !important;
border:1px solid black;
padding:0 20px;
margin:1%;
width:30% !important;
border-radius:2px;
background-color:#EEEEEE;
}
.service-section h4{
text-align:center;
margin:20px;
font-weight:600;
font-size:150%;
}
.service-section p{
text-align:center;
}
.button-container{
text-align:center;
}
.service-section button{
margin: 10px auto !important;
padding:5px;
display:block;
background-image:none;
box-shadow:none;
}
/****>1000px screen services section****/
@media screen and (max-width:1000px){
.service-section{
width:85% !important;
margin:0 auto !important;
padding:0 !important;
}
}
提前致谢，
Ĵ
我会为这3个服务div使用包装器，并为其设置宽度并将该div居中
.wrap {
width: 90%;
margin: 0 auto;
display: block;
}
.section {
width: 32.3%;
background: red;
height: 200px;
margin: 3px;
float: left
}<div class="wrap">
<div class="section"></div>
<div class="section"></div>
<div class="section"></div>
</div>本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句