0
現在、私のウェブサイトにスタッフセクションを作成していますが、問題が発生しています。誰もがすべてを集中させる方法を考えている？もともと4人のスタッフのために作られましたが、私は1人を取り除きました。センター部門部門
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;
}