0
Ich mache derzeit einen Stab Abschnitt auf meiner Website und ich habe Probleme, es zu zentrieren. Hat jemand eine Idee, wie man alles zentriert? Es wurde ursprünglich für vier Mitarbeiter gemacht, aber ich entfernte einen und ich kann nicht alles richtig zentrieren, ohne alles zu vermasseln.Mitte A Div Abschnitt
Sie können es sehen here.
Die 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>
Die 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;
}