I'm facing an issue with centering 3 CSS circles containing icon fonts inside their parent element. No matter what I try, I can't seem to get them properly centered and aligned side by side. I initially used float: left to align them, but it ended up causing problems with the hover effect.
If you want to see the problem in action, you can check out this link. Just head to the portfolio section and hover over one of the members.
Here's how it is supposed to look:
And here's how it currently looks:
This is the HTML code snippet:
<ul class="img-list">
<li>
<img src="img/team-member-1.jpg" alt="...">
<span class="text-content">
<span>
<div class="social-icon-holder">
<span class="ion-social-twitter social-icon"></span>
</div>
<div class="social-icon-holder">
<span class="ion-social-facebook social-icon"></span>
</div>
<div class="social-icon-holder">
<span class="ion-social-dribbble social-icon"></span>
</div>
Johnathan Adams
<p>Developer</p>
</span>
</span>
</li>
</ul>
This is the corresponding CSS code:
/* =Team
-------------------------------------------------------------- */
.team {
padding: 180px 0 180px 0;
}
.team img {
width: 100%;
height: 100%;
}
ul.img-list {
list-style-type: none;
padding: 0;
}
ul.img-list li {
display: inline-block;
position: relative;
height: 350px;
}
span.text-content {
// CSS properties go here
}
span.text-content span {
// CSS properties go here
}
ul.img-list li:hover span.text-content {
// Hover effect CSS properties go here
}
.team span p {
// CSS properties go here
}
.social-icon {
// CSS properties go here
}
.social-icon-holder {
// CSS properties go here
}
.social-icon-holder:hover {
// CSS properties go here
}
.social-icon-holder:hover .social-icon {
// CSS properties go here
}