中心A Div Section

时间：2016-05-17 03:03:20

标签： html css

我目前正在我的网站上制作一个员工部分，我很难将其集中在一起。任何人都知道如何集中一切？它原本是为四名工作人员制作的，但我删除了一个，我似乎无法正确地集中所有内容而不会弄乱一切。

您可以查看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;
}

2 个答案:

答案 0 :(得分：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 :(得分：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>

相关问题
最新问题