使用过渡垂直居中Font Awesome图标

时间：2016-11-09 10:51:45

标签： css transition centering

我有这些带有圆形边框的动画div，里面有Font Awesome图标。什么是垂直对齐它们的最佳方式，同时在整个过渡过程中将它们保持在中间位置？

Here's the animation on CodePen

＆＃13;
＆＃13; 
body {
  background-color: #3498db;
}

.social {
	position: absolute;
	font-size: 36px;
	color: white;
	width: 50px;
	height: 50px;
	border: 4px solid white;
	border-radius: 50%;
	text-align: center;
	padding: 3px;
	transition: all 0.7s cubic-bezier(0.68, -0.55, 0.265, 1.55);
	transform-origin: 50% 50%;
	top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
}


.social a:visited {
	color: currentColor;
}

.social:hover {
	background-color: white;
	color: #3498db;
	width: 80px;
	height: 80px;
	transform-origin: 50% 50%;
}

#facebook {
	animation-name: facebook;
  animation-duration: 1000ms;
  animation-timing-function: ease-in-out;
  animation-delay: 0s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

@keyframes facebook {
	0% {
		transform: translate(148px, 78px);
	}
	100% {
		transform: translate(148px, 84px);
	}
}

#twitter {
	animation-name: twitter;
  animation-duration: 950ms;
  animation-timing-function: ease-in-out;;
  animation-delay: 0s;
  animation-iteration-count: infinite;;
  animation-direction: alternate;
}

@keyframes twitter {
	0% {transform: translate(-178px, -160px);}
	100% {transform: translate(-178px, -164px);}
}

#linkedin {
	animation-name: linkedin;
  animation-duration: 900ms;
  animation-timing-function: ease-in-out;;
  animation-delay: 0s;
  animation-iteration-count: infinite;;
  animation-direction: alternate;
}

@keyframes linkedin {
	0% {transform: translate(168px, -77px);}
	100% {transform: translate(168px, -84px);}
}

#github {
	animation-name: github;
  animation-duration: 950ms;
  animation-timing-function: ease-in-out;;
  animation-delay: 0s;
  animation-iteration-count: infinite;;
  animation-direction: alternate;
}

@keyframes github {
	0% {transform: translate(-198px, 58px);}
	100% {transform: translate(-198px, 54px);}
}

#phone {
	animation-name: phone;
  animation-duration: 900ms;
  animation-timing-function: ease-in-out;;
  animation-delay: 0s;
  animation-iteration-count: infinite;;
  animation-direction: alternate;
}

@keyframes phone {
	0% {transform: translate(0px, -220px);}
	100% {transform: translate(0px, -216px);}
}
＆＃13; 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css">

<div id='bubbles'>
          <a href="https://www.facebook.com/" target="_blank"><div id="facebook" class="social"><span class="fa fa-facebook" aria-hidden="true"></div></a>
          <a href="https://twitter.com/" target="_blank"><div id="twitter" class="social"><span class="fa fa-twitter" aria-hidden="true"></div></a>
          <a href="https://www.linkedin.com/" target="_blank"><div id="linkedin" class="social"><span class="fa fa-linkedin" aria-hidden="true"></div></a>
          <a href="https://www.github.com/" target="_blank"><div id="github" class="social"><span class="fa fa-github" aria-hidden="true"></div></a>
          <a href="https://www.facebook.com/" target="_blank"><div id="phone" class="social"><span class="fa fa-phone" aria-hidden="true"></div></a>
        </div>
＆＃13;
＆＃13;
＆＃13;

3 个答案:

答案 0 :(得分：1)

将line-height: 80px;添加到您的.social班级

.social:hover {
    height: 80px;
    line-height: 80px;
}


body {
    background-color: #3498db;
}
.social {
    position: absolute;
    font-size: 36px;
    color: white;
    width: 50px;
    height: 50px;
    line-height: 50px;
    border: 4px solid white;
    border-radius: 50%;
    text-align: center;
    padding: 3px;
    transition: all 0.7s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    transform-origin: 50% 50%;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
}
.social a:visited {
    color: currentColor;
}
.social:hover {
    background-color: white;
    color: #3498db;
    width: 80px;
    height: 80px;
    line-height: 80px;
    transform-origin: 50% 50%;
}
#facebook {
    animation-name: facebook;
    animation-duration: 1000ms;
    animation-timing-function: ease-in-out;
    animation-delay: 0s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
}
@keyframes facebook {
    0% {
        transform: translate(148px, 78px);
    }
    100% {
        transform: translate(148px, 84px);
    }
}
#twitter {
    animation-name: twitter;
    animation-duration: 950ms;
    animation-timing-function: ease-in-out;
    ;
    animation-delay: 0s;
    animation-iteration-count: infinite;
    ;
    animation-direction: alternate;
}
@keyframes twitter {
    0% {
        transform: translate(-178px, -160px);
    }
    100% {
        transform: translate(-178px, -164px);
    }
}
#linkedin {
    animation-name: linkedin;
    animation-duration: 900ms;
    animation-timing-function: ease-in-out;
    ;
    animation-delay: 0s;
    animation-iteration-count: infinite;
    ;
    animation-direction: alternate;
}
@keyframes linkedin {
    0% {
        transform: translate(168px, -77px);
    }
    100% {
        transform: translate(168px, -84px);
    }
}
#github {
    animation-name: github;
    animation-duration: 950ms;
    animation-timing-function: ease-in-out;
    ;
    animation-delay: 0s;
    animation-iteration-count: infinite;
    ;
    animation-direction: alternate;
}
@keyframes github {
    0% {
        transform: translate(-198px, 58px);
    }
    100% {
        transform: translate(-198px, 54px);
    }
}
#phone {
    animation-name: phone;
    animation-duration: 900ms;
    animation-timing-function: ease-in-out;
    ;
    animation-delay: 0s;
    animation-iteration-count: infinite;
    ;
    animation-direction: alternate;
}
@keyframes phone {
    0% {
        transform: translate(0px, -220px);
    }
    100% {
        transform: translate(0px, -216px);
    }
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css">
<div id='bubbles'>
  <a href="https://www.facebook.com/" target="_blank">
    <div id="facebook" class="social"><span class="fa fa-facebook" aria-hidden="true"></div>
  </a>
  <a href="https://twitter.com/" target="_blank">
    <div id="twitter" class="social"><span class="fa fa-twitter" aria-hidden="true"></div>
  </a>
  <a href="https://www.linkedin.com/" target="_blank">
    <div id="linkedin" class="social"><span class="fa fa-linkedin" aria-hidden="true"></div>
  </a>
  <a href="https://www.github.com/" target="_blank">
    <div id="github" class="social"><span class="fa fa-github" aria-hidden="true"></div>
  </a>
  <a href="https://www.facebook.com/" target="_blank">
    <div id="phone" class="social"><span class="fa fa-phone" aria-hidden="true"></div>
  </a>
</div>

答案 1 :(得分：1)

只需将其添加到您的CSS

即可

<强> CSS 

.social span{
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}


body {
  background-color: #3498db;
}
.social {
  position: absolute;
  font-size: 36px;
  color: white;
  width: 50px;
  height: 50px;
  border: 4px solid white;
  border-radius: 50%;
  padding: 3px;
  transition: all 0.7s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  transform-origin: 50% 50%;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
}
.social a:visited {
  color: currentColor;
}
.social:hover {
  background-color: white;
  color: #3498db;
  width: 80px;
  height: 80px;
  transform-origin: 50% 50%;
}
#facebook {
  animation-name: facebook;
  animation-duration: 1000ms;
  animation-timing-function: ease-in-out;
  animation-delay: 0s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}
@keyframes facebook {
  0% {
    transform: translate(148px, 78px);
  }
  100% {
    transform: translate(148px, 84px);
  }
}
#twitter {
  animation-name: twitter;
  animation-duration: 950ms;
  animation-timing-function: ease-in-out;
  ;
  animation-delay: 0s;
  animation-iteration-count: infinite;
  ;
  animation-direction: alternate;
}
@keyframes twitter {
  0% {
    transform: translate(-178px, -160px);
  }
  100% {
    transform: translate(-178px, -164px);
  }
}
#linkedin {
  animation-name: linkedin;
  animation-duration: 900ms;
  animation-timing-function: ease-in-out;
  ;
  animation-delay: 0s;
  animation-iteration-count: infinite;
  ;
  animation-direction: alternate;
}
@keyframes linkedin {
  0% {
    transform: translate(168px, -77px);
  }
  100% {
    transform: translate(168px, -84px);
  }
}
#github {
  animation-name: github;
  animation-duration: 950ms;
  animation-timing-function: ease-in-out;
  ;
  animation-delay: 0s;
  animation-iteration-count: infinite;
  ;
  animation-direction: alternate;
}
@keyframes github {
  0% {
    transform: translate(-198px, 58px);
  }
  100% {
    transform: translate(-198px, 54px);
  }
}
#phone {
  animation-name: phone;
  animation-duration: 900ms;
  animation-timing-function: ease-in-out;
  ;
  animation-delay: 0s;
  animation-iteration-count: infinite;
  ;
  animation-direction: alternate;
}
@keyframes phone {
  0% {
    transform: translate(0px, -220px);
  }
  100% {
    transform: translate(0px, -216px);
  }
}
.social span {
  position: relative;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" />
<div id='bubbles'>
  <a href="https://www.facebook.com/" target="_blank">
    <div id="facebook" class="social"><span class="fa fa-facebook" aria-hidden="true"></div></a>
          <a href="https://twitter.com/" target="_blank"><div id="twitter" class="social"><span class="fa fa-twitter" aria-hidden="true"></div></a>
          <a href="https://www.linkedin.com/" target="_blank"><div id="linkedin" class="social"><span class="fa fa-linkedin" aria-hidden="true"></div></a>
          <a href="https://www.github.com/" target="_blank"><div id="github" class="social"><span class="fa fa-github" aria-hidden="true"></div></a>
          <a href="https://www.facebook.com/" target="_blank"><div id="phone" class="social"><span class="fa fa-phone" aria-hidden="true"></div></a>
        </div>

答案 2 :(得分：1)

您可以将display:table用于外部容器，将display:table-cell和vertical-align:middle用于内部元素

#facebook, #twitter, #linkedin, #github, #phone {
  display:table;
  margin:auto
}

.fa {
  display:table-cell;
  vertical-align:middle
}

无论高度如何，它都会使内部内容垂直居中，并且它也与旧版浏览器兼容http://caniuse.com/#search=vertical-align

＆＃13;
＆＃13; 
body {
  background-color: #3498db;
}
.fa {
display:table-cell !important;
vertical-align: middle;
}

.social {
	position: absolute;
	font-size: 36px;
	color: white;
	width: 50px;
	height: 50px;
	border: 4px solid white;
	border-radius: 50%;
	text-align: center;
	padding: 3px;
	transition: all 0.7s cubic-bezier(0.68, -0.55, 0.265, 1.55);
	transform-origin: 50% 50%;
	top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
}


.social a:visited {
	color: currentColor;
}

.social:hover {
	background-color: white;
	color: #3498db;
	width: 80px;
	height: 80px;
	transform-origin: 50% 50%;
}

#facebook {
	animation-name: facebook;
  animation-duration: 1000ms;
  animation-timing-function: ease-in-out;
  animation-delay: 0s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
display:table;
margin:auto;
}

@keyframes facebook {
	0% {
		transform: translate(148px, 78px);
	}
	100% {
		transform: translate(148px, 84px);
	}
}

#twitter {
	animation-name: twitter;
  animation-duration: 950ms;
  animation-timing-function: ease-in-out;;
  animation-delay: 0s;
  animation-iteration-count: infinite;;
  animation-direction: alternate;
  display:table;
  margin:auto;
}

@keyframes twitter {
	0% {transform: translate(-178px, -160px);}
	100% {transform: translate(-178px, -164px);}
}

#linkedin {
	animation-name: linkedin;
  animation-duration: 900ms;
  animation-timing-function: ease-in-out;;
  animation-delay: 0s;
  animation-iteration-count: infinite;;
  animation-direction: alternate;
  display:table;
  margin:auto;

}

@keyframes linkedin {
	0% {transform: translate(168px, -77px);}
	100% {transform: translate(168px, -84px);}
}

#github {
	animation-name: github;
  animation-duration: 950ms;
  animation-timing-function: ease-in-out;;
  animation-delay: 0s;
  animation-iteration-count: infinite;;
  animation-direction: alternate;
  display:table;
  margin:auto;

}

@keyframes github {
	0% {transform: translate(-198px, 58px);}
	100% {transform: translate(-198px, 54px);}
}

#phone {
	animation-name: phone;
  animation-duration: 900ms;
  animation-timing-function: ease-in-out;;
  animation-delay: 0s;
  animation-iteration-count: infinite;;
  animation-direction: alternate;
  display:table;
  margin:auto;

}

@keyframes phone {
	0% {transform: translate(0px, -220px);}
	100% {transform: translate(0px, -216px);}
}
＆＃13; 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css">

<div id='bubbles'>
          <a href="https://www.facebook.com/" target="_blank"><div id="facebook" class="social"><span class="fa fa-facebook" aria-hidden="true"></div></a>
          <a href="https://twitter.com/" target="_blank"><div id="twitter" class="social"><span class="fa fa-twitter" aria-hidden="true"></div></a>
          <a href="https://www.linkedin.com/" target="_blank"><div id="linkedin" class="social"><span class="fa fa-linkedin" aria-hidden="true"></div></a>
          <a href="https://www.github.com/" target="_blank"><div id="github" class="social"><span class="fa fa-github" aria-hidden="true"></div></a>
          <a href="https://www.facebook.com/" target="_blank"><div id="phone" class="social"><span class="fa fa-phone" aria-hidden="true"></div></a>
        </div>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题