css 圆形背景icon_居中在css圆形，在父母内部的图标字体

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:

• Johnathan Adams

  Developer

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;

}

解决方案

Wrap a

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;

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;

}