问题
My issue is that I have a div (id=service-section-container) which contains 3 divs (class=service-section) which are shifted to the left of their parent div. I haven't found an efficient way to center the group of child divs using margins as using pixels would have a different result of different screens where as percentage didn't do the trick.
It's probably a simple fix which I couldn't solve with my lack of experience, hence why I'd really appreciate your help.
Example can be found at the link: http://jsfiddle.net/6tob3q1z/2/
Note: You might need to zoom out on the fiddle to understand what i'm talking about as at 1000px the divs in question (service-section) will re-position to on top of each other
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;
}
}
Thanks in advance,
J
回答1:
i would use wrapper for those 3 service divs and set a width for it and center that 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>来源：https://stackoverflow.com/questions/33722897/css-html-spread-child-divs-across-parent-div