2016-05-17 45 views
0

我目前正在我的网站上制作一个工作人员部分,并且无法集中它。任何人都有关于如何集中一切的想法?它最初是为四名工作人员制作的,但我删除了一个,而且我似乎无法正确对齐所有内容,而不会将所有内容搞乱。Centre A Div部分

您可以浏览它here

的HTML:

<!--Team--> 
<section class="content-block white" id="team"> 
    <div class="container"> 
    <div class="row animation" data-animation="fadeInUp"><!--By adding/removing class "animation" we enable/disable scroll animation of current element--> 
     <h1>The Team</h1> 
     <h2>The People Behind It All</h2> 
    </div> 
    <div class="row"> 
     <div class="col-lg-3 col-md-6 col-sm-6 animation" data-animation="fadeInLeft"><!--By adding/removing class "animation" we enable/disable scroll animation of current element--> 
     <div class="team"> 
      <img src="img/Jordan.jpg" width="248" height="248" alt="Dexter Kirk"/> 
      <h2>Jordan<br/>Berger</h2> 
      <h3>Title</h3> 
      <div class="social-icons si-icon-effect"> 
      <a href="#" class="si-icon fa fa-facebook">Facebook</a> 
      <a href="#" class="im-icon-m icon-google-plus-ios">Google Plus</a> 
      <a href="#" class="im-icon-l icon-instagram-ios">Instagram</a> 
      </div> 
     </div> 
     </div> 
     <div class="col-lg-3 col-md-6 col-sm-6 animation" data-animation="fadeInLeft"><!--By adding/removing class "animation" we enable/disable scroll animation of current element--> 
     <div class="team"> 
      <img src="img/Allan.jpg" width="248" height="248" alt="Richard Roe"/> 
      <h2>Allan<br/>Maman</h2> 
      <h3>Title</h3> 
      <div class="social-icons si-icon-effect"> 
      <a href="#" class="si-icon fa fa-facebook">Facebook</a> 
      <a href="#" class="im-icon-m icon-google-plus-ios">Google Plus</a> 
      <a href="#" class="im-icon-l icon-instagram-ios">Instagram</a> 
      </div> 
     </div> 
     </div> 
     <div class="col-lg-3 col-md-6 col-sm-6 animation" data-animation="fadeInRight"><!--By adding/removing class "animation" we enable/disable scroll animation of current element--> 
     <div class="team"> 
      <img src="img/Cooper.jpg" width="248" height="248" alt="Anna Lobzenko"/> 
      <h2>Cooper<br/>Weiss</h2> 
      <h3>Title</h3> 
      <div class="social-icons si-icon-effect"> 
      <a href="#" class="si-icon fa fa-facebook">Facebook</a> 
      <a href="#" class="im-icon-m icon-google-plus-ios">Google Plus</a> 
      <a href="#" class="im-icon-l icon-instagram-ios">Instagram</a> 
      </div> 
     </div> 
     </div> 
    </div> 
    </div> 
</section> 

的CSS:

/*Team*/ 
.team { 
    width: 100%; 
    margin-bottom: 40px; 
} 
.team img { 
    display: block; 
    margin: 0 auto 30px auto; 
    border: 5px solid transparent; 
    -webkit-border-radius: 50%; 
    -moz-border-radius: 50%; 
    border-radius: 50%; 
    -webkit-transition: all 400ms ease-in-out; 
    -moz-transition: all 400ms ease-in-out; 
    -o-transition: all 400ms ease-in-out; 
    transition: all 400ms ease-in-out; 
} 
.team h2, 
.team h3 { 
    margin-bottom: 25px; 
} 
.team .social-icons { 
    display: table; 
    margin: 0 auto; 
} 
.team .si-icon, 
.team .im-icon-s, 
.team .im-icon-m, 
.team .im-icon-l { 
    margin: 15px 33px 0 0; 
    color: #999; 
    -webkit-transition: all 400ms ease-in-out; 
    -moz-transition: all 400ms ease-in-out; 
    -o-transition: all 400ms ease-in-out; 
    transition: all 400ms ease-in-out; 
} 
.team:hover img { 
    border: 5px solid #fff; 
} 
.team .si-icon-effect .si-icon, 
.team .si-icon-effect .im-icon-s, 
.team .si-icon-effect .im-icon-m, 
.team .si-icon-effect .im-icon-l { 
    box-shadow: 0 0 0 1px #999; 
    -webkit-transition: all 400ms ease-in-out; 
    -moz-transition: all 400ms ease-in-out; 
    -o-transition: all 400ms ease-in-out; 
    transition: all 400ms ease-in-out; 
} 
.team:hover .si-icon, 
.team:hover .im-icon-s, 
.team:hover .im-icon-m, 
.team:hover .im-icon-l { 
    color: #666; 
} 
.team:hover .si-icon-effect .si-icon, 
.team:hover .si-icon-effect .im-icon-s, 
.team:hover .si-icon-effect .im-icon-m, 
.team:hover .si-icon-effect .im-icon-l { 
    box-shadow: 0 0 0 1px #666; 
} 

回答

3

所有你需要做的是改变col-lg-x屏幕每个人集装箱的对列大小

<div class="col-lg-3 col-md-6 col-sm-6 animation"...><div class="col-lg-4 col-md-6 col-sm-6 animation"...>

1

我做了一些改变你的代码,看看这个:

<!--Team--> 
<section class="content-block white" id="team"> 
<div class="container"> 
<div class="row animation" data-animation="fadeInUp"><!--By adding/removing class "animation" we enable/disable scroll animation of current element--> 
    <h1>The Team</h1> 
    <h2>The People Behind It All</h2> 
</div> 
<div class="row"> 
    <div class="col-lg-4 col-md-6 col-sm-6 animation" data-animation="fadeInLeft"><!--By adding/removing class "animation" we enable/disable scroll animation of current element--> 
    <div class="team"> 
     <img src="img/Jordan.jpg" width="248" height="248" alt="Dexter Kirk"/> 
     <h2>Jordan<br/>Berger</h2> 
     <h3>Title</h3> 
     <div class="social-icons si-icon-effect"> 
     <a href="#" class="si-icon fa fa-facebook">Facebook</a> 
     <a href="#" class="im-icon-m icon-google-plus-ios">Google Plus</a> 
     <a href="#" class="im-icon-l icon-instagram-ios">Instagram</a> 
     </div> 
    </div> 
    </div> 
    <div class="col-lg-4 col-md-6 col-sm-6 animation" data-animation="fadeInLeft"><!--By adding/removing class "animation" we enable/disable scroll animation of current element--> 
    <div class="team"> 
     <img src="img/Allan.jpg" width="248" height="248" alt="Richard Roe"/> 
     <h2>Allan<br/>Maman</h2> 
     <h3>Title</h3> 
     <div class="social-icons si-icon-effect"> 
     <a href="#" class="si-icon fa fa-facebook">Facebook</a> 
     <a href="#" class="im-icon-m icon-google-plus-ios">Google Plus</a> 
     <a href="#" class="im-icon-l icon-instagram-ios">Instagram</a> 
     </div> 
    </div> 
    </div> 
    <div class="col-lg-4 col-md-6 col-sm-6 animation" data-animation="fadeInRight"><!--By adding/removing class "animation" we enable/disable scroll animation of current element--> 
    <div class="team"> 
     <img src="img/Cooper.jpg" width="248" height="248" alt="Anna Lobzenko"/> 
     <h2>Cooper<br/>Weiss</h2> 
     <h3>Title</h3> 
     <div class="social-icons si-icon-effect"> 
     <a href="#" class="si-icon fa fa-facebook">Facebook</a> 
     <a href="#" class="im-icon-m icon-google-plus-ios">Google Plus</a> 
     <a href="#" class="im-icon-l icon-instagram-ios">Instagram</a> 
     </div> 
    </div> 
    </div> 
</div>