容器部分 - 如何将其对齐以使其居中？

时间：2018-04-20 17:28:37

标签： html css

我对网站www.deks.org.rs中的容器类有疑问 当您滚动“Sponzori”（HTML中的Staff部分）时，您可以看到赞助商的3个徽标。在模板中我从web获得这个容器看起来像4 * x矩阵。我这里只有3个物体，我希望像4个物体一样居中（我想你明白我想说的话）。这怎么可能？
附加了HTML和CSS文件。
提前谢谢！

/*-- Staff section --*/

section.staff-agileinfo {
  padding: 100px 0;
}

section.staff-agileinfo h3.text-center {
  font-size: 40px;
  font-weight: normal;
  color: #000;
  font-family: 'Trebuchet MS', sans-serif;
  padding-bottom: 50px;
}

.view {
  width: 100%;
  height: auto;
  margin: 0 auto;
  border: 10px solid #f72d2d;
  overflow: hidden;
  position: relative;
  text-align: center;
  -webkit-box-shadow: 1px 1px 2px #e6e6e6;
  -moz-box-shadow: 1px 1px 2px #e6e6e6;
  box-shadow: 1px 1px 2px #e6e6e6;
  cursor: default;
}

.view .mask,
.view .content {
  width: 100%;
  height: 100%;
  position: absolute;
  overflow: hidden;
  top: 0;
  left: 0;
}

.view img {
  display: block;
  position: relative;
}

.view h4 {
  text-transform: uppercase;
  color: #fff;
  text-align: center;
  position: relative;
  font-size: 17px;
  padding: 10px;
  background: rgba(0, 0, 0, 0.8);
  margin: 150px 0 0 0;
  font-family: 'Trebuchet MS', sans-serif;
}

.view ul.team-social {
  text-align: center;
  padding: 30px 0;
}

.view ul.team-social li {
  display: inline-block;
}

.view ul.team-social li a i.fa {
  width: 40px;
  height: 40px;
  text-align: center;
  line-height: 40px;
  font-size: 18px;
  color: #fff;
  border-radius: 50%;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -o-border-radius: 50%;
  -ms-border-radius: 50%;
}

.view ul.team-social li a:hover i.fa {
  -webkit-animation: spin 2s linear infinite;
  animation: spin 2s linear infinite;
}

.view ul.team-social li a i.fa.fa-facebook {
  background-color: #3b5998;
  color: #fff;
}

.view ul.team-social li a i.fa.fa-youtube {
  background-color: #cd201f;
  color: #fff;
}

.view ul.team-social li a i.fa.fa-twitter {
  background-color: #1da1f2;
  color: #fff;
}

.view ul.team-social li a i.fa.fa-google-plus {
  background-color: #dd4b39;
  color: #fff;
}

.view ul.team-social li a i.fa.fa-linkedin {
  background-color: #0077b5;
  color: #fff;
}

.view p.info {
  text-decoration: none;
  padding: 7px 14px;
  background: #000;
  color: #fff;
  text-transform: uppercase;
  -webkit-box-shadow: 0 0 1px #000;
  -moz-box-shadow: 0 0 1px #000;
  box-shadow: 0 0 1px #000;
}

.view p.info: hover {
  -webkit-box-shadow: 0 0 5px #000;
  -moz-box-shadow: 0 0 5px #000;
  box-shadow: 0 0 5px #000;
}

.view-eighth .mask {
  background-color: rgba(247, 186, 45, 0.55);
  top: -200px;
  -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
  filter: alpha(opacity=0);
  opacity: 0;
  -webkit-transition: all 0.3s ease-out 0.5s;
  -moz-transition: all 0.3s ease-out 0.5s;
  -o-transition: all 0.3s ease-out 0.5s;
  -ms-transition: all 0.3s ease-out 0.5s;
  transition: all 0.3s ease-out 0.5s;
}

.view-eighth h4 {
  -webkit-transform: translateY(-200px);
  -moz-transform: translateY(-200px);
  -o-transform: translateY(-200px);
  -ms-transform: translateY(-200px);
  transform: translateY(-200px);
  -webkit-transition: all 0.2s ease-in-out 0.1s;
  -moz-transition: all 0.2s ease-in-out 0.1s;
  -o-transition: all 0.2s ease-in-out 0.1s;
  -ms-transition: all 0.2s ease-in-out 0.1s;
  transition: all 0.2s ease-in-out 0.1s;
}

.view-eighth ul.team-social {
  color: #333;
  -webkit-transform: translateY(-200px);
  -moz-transform: translateY(-200px);
  -o-transform: translateY(-200px);
  -ms-transform: translateY(-200px);
  transform: translateY(-200px);
  -webkit-transition: all 0.2s ease-in-out 0.2s;
  -moz-transition: all 0.2s ease-in-out 0.2s;
  -o-transition: all 0.2s ease-in-out 0.2s;
  -ms-transition: all 0.2s ease-in-out 0.2s;
  transition: all 0.2s ease-in-out 0.2s;
}

.view-eighth p.info {
  -webkit-transform: translateY(-200px);
  -moz-transform: translateY(-200px);
  -o-transform: translateY(-200px);
  -ms-transform: translateY(-200px);
  transform: translateY(-200px);
  -webkit-transition: all 0.2s ease-in-out 0.3s;
  -moz-transition: all 0.2s ease-in-out 0.3s;
  -o-transition: all 0.2s ease-in-out 0.3s;
  -ms-transition: all 0.2s ease-in-out 0.3s;
  transition: all 0.2s ease-in-out 0.3s;
}

.view-eighth:hover .mask {
  -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
  filter: alpha(opacity=100);
  opacity: 1;
  top: 0px;
  -webkit-transition-delay: 0s;
  -moz-transition-delay: 0s;
  -o-transition-delay: 0s;
  -ms-transition-delay: 0s;
  transition-delay: 0s;
  -webkit-animation: bounceY 0.9s linear;
  -moz-animation: bounceY 0.9s linear;
  -ms-animation: bounceY 0.9s linear;
  animation: bounceY 0.9s linear;
}

.view-eighth:hover h4 {
  -webkit-transform: translateY(0px);
  -moz-transform: translateY(0px);
  -o-transform: translateY(0px);
  -ms-transform: translateY(0px);
  transform: translateY(0px);
  -webkit-transition-delay: 0.4s;
  -moz-transition-delay: 0.4s;
  -o-transition-delay: 0.4s;
  -ms-transition-delay: 0.4s;
  transition-delay: 0.4s;
}

.view-eighth:hover ul.team-social {
  -webkit-transform: translateY(0px);
  -moz-transform: translateY(0px);
  -o-transform: translateY(0px);
  -ms-transform: translateY(0px);
  transform: translateY(0px);
  -webkit-transition-delay: 0.2s;
  -moz-transition-delay: 0.2s;
  -o-transition-delay: 0.2s;
  -ms-transition-delay: 0.2s;
  transition-delay: 0.2s;
}

.view-eighth:hover p.info {
  -webkit-transform: translateY(0px);
  -moz-transform: translateY(0px);
  -o-transform: translateY(0px);
  -ms-transform: translateY(0px);
  transform: translateY(0px);
  -webkit-transition-delay: 0s;
  -moz-transition-delay: 0s;
  -o-transition-delay: 0s;
  -ms-transition-delay: 0s;
  transition-delay: 0s;
}

@keyframes bounceY {
  0% {
    transform: translateY(-205px);
  }
  40% {
    transform: translateY(-100px);
  }
  65% {
    transform: translateY(-52px);
  }
  82% {
    transform: translateY(-25px);
  }
  92% {
    transform: translateY(-12px);
  }
  55%,
  75%,
  87%,
  97%,
  100% {
    transform: translateY(0px);
  }
}

@-moz-keyframes bounceY {
  0% {
    -moz-transform: translateY(-205px);
  }
  40% {
    -moz-transform: translateY(-100px);
  }
  65% {
    -moz-transform: translateY(-52px);
  }
  82% {
    -moz-transform: translateY(-25px);
  }
  92% {
    -moz-transform: translateY(-12px);
  }
  55%,
  75%,
  87%,
  97%,
  100% {
    -moz-transform: translateY(0px);
  }
}

@-webkit-keyframes bounceY {
  0% {
    -webkit-transform: translateY(-205px);
  }
  40% {
    -webkit-transform: translateY(-100px);
  }
  65% {
    -webkit-transform: translateY(-52px);
  }
  82% {
    -webkit-transform: translateY(-25px);
  }
  92% {
    -webkit-transform: translateY(-12px);
  }
  55%,
  75%,
  87%,
  97%,
  100% {
    -webkit-transform: translateY(0px);
  }
}
<section class="staff-agileinfo" id="team">
  <div class="container">
    <h3 class="text-center">Sponzori</h3>
    <div class="col-lg-3 col-md-3 col-sm-6 col-xs-6 team-agile1" data-aos="flip-up">
      <div class="view view-eighth">
        <img src="images/nn.jpg" alt="" class="img-responsive" />
        <div class="mask">
          <h4>Novo Nordisk</h4>
          <p class="info">Generalni pokrovitelj</p>
        </div>
      </div>
    </div>
    <div class="col-lg-3 col-md-3 col-sm-6 col-xs-6 team-agile2" data-aos="flip-up">
      <div class="view view-eighth">
        <img src="images/me.jpg" alt="" class="img-responsive" />
        <div class="mask">
          <h4>Merck</h4>
          <p class="info">Partner kongresa</p>
        </div>
      </div>
    </div>
    <div class="col-lg-3 col-md-3 col-sm-6 col-xs-6 team-agile3" data-aos="flip-up">
      <div class="view view-eighth">
        <img src="images/ro.jpg" alt="" class="img-responsive" />
        <div class="mask">
          <h4>Roche</h4>
          <p class="info">Partner kongresa</p>
        </div>
      </div>
    </div>
  </div>
</section>

1 个答案:

答案 0 :(得分：0)

我会从容器中取出<h3>，并将容器设为：

display: flex;
justify-content: center;

您的代码将是：

＆＃13;
＆＃13; 
/*-- Staff section --*/
section.staff-agileinfo {
    padding: 100px 0;
}
section.staff-agileinfo h3.text-center {
	font-size:40px;
	font-weight:normal;
	color:#000;
	font-family: 'Trebuchet MS', sans-serif;
	padding-bottom:50px;
}

section.staff-agileinfo > .container{
  display: flex;
  justify-content: center;
}

.view {
   width:100%;
   height:auto;
   margin:0 auto;
   border: 10px solid #f72d2d;
   overflow: hidden;
   position: relative;
   text-align: center;
   -webkit-box-shadow: 1px 1px 2px #e6e6e6;
   -moz-box-shadow: 1px 1px 2px #e6e6e6;
   box-shadow: 1px 1px 2px #e6e6e6;
   cursor: default;
}
.view .mask,.view .content {
   width:100%;
   height:100%;
   position: absolute;
   overflow: hidden;
   top: 0;
   left: 0;
}
.view img {
   display: block;
   position: relative;
}
.view h4 {
   text-transform: uppercase;
   color: #fff;
   text-align: center;
   position: relative;
   font-size: 17px;
   padding: 10px;
   background: rgba(0, 0, 0, 0.8);
   margin: 150px 0 0 0;
   font-family: 'Trebuchet MS', sans-serif;
}
.view ul.team-social {
	text-align:center;
	padding:30px 0;
}
.view ul.team-social li {
	display:inline-block;
}
.view ul.team-social li a i.fa {
	width:40px;
	height:40px;
	text-align:center;
	line-height:40px;
	font-size:18px;
	color:#fff;
	border-radius:50%;
	-webkit-border-radius:50%;
	-moz-border-radius:50%;
	-o-border-radius:50%;
	-ms-border-radius:50%;
}
.view ul.team-social li a:hover i.fa {
	-webkit-animation: spin 2s linear infinite;
	animation: spin 2s linear infinite;
}
.view ul.team-social li a i.fa.fa-facebook {
	background-color:#3b5998;
	color:#fff;
}
.view ul.team-social li a i.fa.fa-youtube {
	background-color:#cd201f;
	color:#fff;
}
.view ul.team-social li a i.fa.fa-twitter {
	background-color:#1da1f2;
	color:#fff;
}
.view ul.team-social li a i.fa.fa-google-plus {
	background-color:#dd4b39;
	color:#fff;
}
.view ul.team-social li a i.fa.fa-linkedin {
	background-color:#0077b5;
	color:#fff;
}
.view p.info {
   text-decoration: none;
   padding: 7px 14px;
   background: #000;
   color: #fff;
   text-transform: uppercase;
   -webkit-box-shadow: 0 0 1px #000;
   -moz-box-shadow: 0 0 1px #000;
   box-shadow: 0 0 1px #000;
}
.view p.info: hover {
   -webkit-box-shadow: 0 0 5px #000;
   -moz-box-shadow: 0 0 5px #000;
   box-shadow: 0 0 5px #000;
}
＆＃13; 
<!-- Staff section  --> 
<section class="staff-agileinfo" id="team">
  <h3 class="text-center">Sponzori</h3>
	<div class="container">
		<div class="col-lg-3 col-md-3 col-sm-6 col-xs-6 team-agile1" data-aos="flip-up">
			<div class="view view-eighth">
                <img src="images/nn.jpg" alt="" class="img-responsive"/>
                <div class="mask">
				<h4>Novo Nordisk</h4>
					
                    <p class="info">Generalni pokrovitelj</p>
                </div>
            </div>
		</div>
		<div class="col-lg-3 col-md-3 col-sm-6 col-xs-6 team-agile2" data-aos="flip-up">
			<div class="view view-eighth">
              <img src="images/me.jpg" alt="" class="img-responsive"/>
                <div class="mask">
                    <h4>Merck</h4>
					
                    <p class="info">Partner kongresa</p>
                </div>
            </div>
		</div>
		<div class="col-lg-3 col-md-3 col-sm-6 col-xs-6 team-agile3" data-aos="flip-up">
			<div class="view view-eighth">
                <img src="images/ro.jpg" alt="" class="img-responsive"/>
                <div class="mask">
                    <h4>Roche</h4>
                   
                    <p class="info">Partner kongresa</p>
                </div>
            </div>
		</div>

		
	</div>
</section> 
<!-- /Staff section -->
＆＃13;
＆＃13;
＆＃13;

希望这有帮助！

相关问题
最新问题