Выравнивание изображение вертикально по центру
Всем привет. Помогите выровнять картинку вертикально по центру, относительно блоку див. Она по непонятно мне причине находится с небольшим смещением вниз.
Код:
<div align="center">
<a href="http://google.com">
<div type="button" class="email-bt">
<div class="text-call">
<img src="https://i.ya-webdesign.com/images/constellation-transparent-starry-1.png">
</div>
</div>
</a>
</div>Код:
.email-bt {
background:#D81B33;
border:2px solid #D81B33;
border-radius:50%;
box-shadow:0 8px 10px rgba(249,92,24,0.3);
cursor:pointer;
height:168px;
text-align:center;
width:168px;
line-height: 168px;
z-index:999;
transition:.3s;
-webkit-animation:email-an linear 1s infinite;
animation:email-an linear 1s infinite;
}
.image-flex {
display:flex;
align-items: center;
justify-content: center;
}
.email-bt .text-call{
height:96%;
width:96%;
border-radius:50%;
position:relative;
overflow:hidden;
padding:5px;
line-height: normal;
display: inline-block;
vertical-align: middle;
}
.email-bt .text-call img{
display:block;
margin:auto;
}
.email-bt:hover {
z-index:1;
background:#fff;
transition:.3s;
}
@-webkit-keyframes email-an {
0% {
box-shadow:0 8px 10px rgba(249,92,24,0.3),0 0 0 0 rgba(249,92,24,0.2),0 0 0 0 rgba(249,92,24,0.2)
}
40% {
box-shadow:0 8px 10px rgba(249,92,24,0.3),0 0 0 15px rgba(249,92,24,0.2),0 0 0 0 rgba(249,92,24,0.2)
}
80% {
box-shadow:0 8px 10px rgba(249,92,24,0.3),0 0 0 30px rgba(249,92,24,0),0 0 0 26.7px rgba(249,92,24,0.067)
}
100% {
box-shadow:0 8px 10px rgba(249,92,24,0.3),0 0 0 30px rgba(249,92,24,0),0 0 0 40px rgba(249,92,24,0.0)
}
}@keyframes email-an {
0% {
box-shadow:0 8px 10px rgba(249,92,24,0.3),0 0 0 0 rgba(249,92,24,0.2),0 0 0 0 rgba(249,92,24,0.2)
}
40% {
box-shadow:0 8px 10px rgba(249,92,24,0.3),0 0 0 15px rgba(249,92,24,0.2),0 0 0 0 rgba(249,92,24,0.2)
}
80% {
box-shadow:0 8px 10px rgba(249,92,24,0.3),0 0 0 30px rgba(249,92,24,0),0 0 0 26.7px rgba(249,92,24,0.067)
}
100% {
box-shadow:0 8px 10px rgba(249,92,24,0.3),0 0 0 30px rgba(249,92,24,0),0 0 0 40px rgba(249,92,24,0.0)
}
}
@keyframes opsimple {
0% {
opacity: 0;
}
40% {
opacity: 1;
}
80% {
opacity: 1;
}
100% {
opacity: 0;
}
}
@-webkit-keyframes opsimple {
0% {
opacity: 0;
}
40% {
opacity: 1;
}
80% {
opacity: 1;
}
100% {
opacity: 0;
}
}