Centering icon font in css circle, inside of parent - html

Question

Ok so I have 3 css circles with icon fonts centered inside of them, now I cant for the life of me get it centered inside of its parent. Also instead of lining up they are stacking on top of each other, I used float: left to fix this but it messed up my whole hover.
Take a look here, just go to portfolio section and hover over one of the members.
How it is suppose to look:
How it looks:
HTML:
<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>
CSS:
/* =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 {
background: rgba(39,39,39,0.75);
color: white;
cursor: pointer;
display: table;
left: 0;
position: absolute;
top: 0;
opacity: 0;
width: 100%;
height: 100%;
}
span.text-content span {
display: table-cell;
text-align: center;
vertical-align: middle;
}
ul.img-list li:hover span.text-content {
opacity: 1;
-webkit-transition: opacity 500ms;
-moz-transition: opacity 500ms;
-o-transition: opacity 500ms;
transition: opacity 500ms;
}
.team span p {
font-family: 'Montserrat', sans-serif;
text-transform: uppercase;
font-size: 14px;
color: #a5a5a5;
}
.social-icon {
font-size: 12px;
color: #fff;
margin: 0 auto;
display: table-cell;
vertical-align: middle;
}
.social-icon-holder {
border: 2px solid #fff;
border-radius: 50%;
width: 30px;
height: 30px;
display: table;
}
.social-icon-holder:hover {
background-color: #fff;
cursor: pointer;
}
.social-icon-holder:hover .social-icon {
color: #272727;
cursor: pointer;
-webkit-transition: color 0.5s ease;
}

Answer 1

Wrap a <p> tag around the team members name to make it a block element and essentially put it on a new line.
Then, in .social-icon-holder{
change
display:table;
to
display:inline-block;
or
display:inline-table;
JsFiddle
For this JsFiddle, I jut used a placeholder background image.
To get the social icons center, I did this:
.social-icon {
font-size: 12px;
color: #fff;
display: block;
text-align:center;
width:30px;
height:30px;
}
JsFiddle

Answer 2

you have to remove display :table from the class .social-icon-holder and then you may add display: table-cell; property.
also to align the icons inside the circle you can add font-size and a little bit padding.
HEre I've just added for facebook icon, but you can apply it on .social-icon so apply for all icons.
.ion-social-facebook:before {
content: "\f231";
font-size: 2em; /*Added line this will increase the icon size*/
padding-left: .4em;
}

Answer 3

from my comment: http://jsfiddle.net/h7kJS/ full result : http://jsfiddle.net/h7kJS/2/embedded/result/
.social-icon-holder can be displayed as inline-table (inline-block+line-height works too).
Image should be in absolute under .text-content to make things easier :below: update of your CSS (where .team was removed for .img-list )
/* =Team
-------------------------------------------------------------- */
.img-list {/* update */
padding: 180px 0 180px 0;
}
.img-list img {/* update */
width: 100%;
height: 100%;
position:absolute;/* update */
z-index:0;/* update */
}
ul.img-list {
list-style-type: none;
padding: 0;
}
ul.img-list li {
display: inline-block;
position: relative;
height: 350px;
width:350px;/* update */
}
span.text-content {
background: rgba(39,39,39,0.75);
color: white;
cursor: pointer;
display: table;
left: 0;
top: 0;
opacity: 0;
width: 100%;
height: 100%;
}
span.text-content span {
display: table-cell;
text-align: center;
vertical-align: middle;
height:100%;
width:100%;
}
ul.img-list li:hover span.text-content {
opacity: 1;
transition: opacity 500ms;
position:relative;/* update */
}
.team span p {
font-family: 'Montserrat', sans-serif;
text-transform: uppercase;
font-size: 14px;
color: #a5a5a5;
}
.social-icon {
font-size: 12px;
color: #fff;
margin: 0 auto;
display: table-cell;
vertical-align: middle;
}
.social-icon-holder {
border: 2px solid #fff;
border-radius: 50%;
width: 30px;
height: 30px;
display: inline-table;/* update */
}
.social-icon-holder:hover {
background-color: #fff;
cursor: pointer;
}
.social-icon-holder:hover .social-icon {
color: #272727;
cursor: pointer;
transition: color 0.5s ease;
}

Answer 4

Is it ok ? try this code
.social-icon-holder {
border: 2px solid #FFFFFF;
border-radius: 50%;
height: 30px;
width: 30px;
display: block;
margin: 0 auto;
}

Answer 5

Try doing this:
<span>
<div class="social">
<div class="social-icon-holder">
<span class="ion-social-twitter social-icon"></span>
</div>
<div class="social-icon-holder">
<span class="ion-social-twitter social-icon"></span>
</div>
<div class="social-icon-holder">
<span class="ion-social-twitter social-icon"></span>
</div>
</div>
</span>
--- stylesheet --
.social div{
display: inline-block;
}
.social-icon{
padding: 8px 10px;
}