居中圖標字體在css圈內，父母的內部

Question

好了，所以我有3個圖標字體集中在他們的css圈子，現在我不能爲我的生活得到它的父母中心。而不是排隊，他們堆疊在彼此的頂部，我用float：左來解決這個問題，但它搞砸了我整個懸停。

Take a look here，只需轉到投資組合部分並將鼠標懸停在其中一位成員上。

它是如何想一下：

它的外觀：

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

將<p>標籤包裝在團隊成員名稱周圍，使其成爲塊元素並基本上將其放在新行上。

然後，在.social-icon-holder{

變化

display:table; 

到

display:inline-block; 

或

display:inline-table; 

JsFiddle

對於這個JsFiddle，我突出了一個佔位符背景圖片。

要得到社會的圖標中心，我這樣做：

.social-icon { 
    font-size: 12px; 
    color: #fff; 
    display: block; 
    text-align:center; 
    width:30px; 
    height:30px; 
} 

JsFiddle

Answer 2

是否確定？試試這個代碼

.social-icon-holder { 
    border: 2px solid #FFFFFF; 
    border-radius: 50%; 
    height: 30px; 
    width: 30px; 

    display: block; 
    margin: 0 auto; 
} 

Answer 3

，你必須從類.social-icon-holder刪除display :table然後您可以添加display: table-cell;財產。

還可以對齊圓圈內的圖標，您可以添加font-size和一點點padding。

我剛剛添加了facebook圖標，但是您可以將其應用於.social-icon以便申請所有圖標。

.ion-social-facebook:before { 
content: "\f231"; 
font-size: 2em; /*Added line this will increase the icon size*/ 
padding-left: .4em; 
} 

Answer 4

嘗試這樣做：

<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> 

---樣式 -

.social div{ 
    display: inline-block; 
} 

.social-icon{ 
    padding: 8px 10px; 
} 

Answer 5

從我的評論：http://jsfiddle.net/h7kJS/完整的結果：http://jsfiddle.net/h7kJS/2/embedded/result/ .social-icon-holder可以顯示爲inline-table（inline-block + line-height也可以）。

形象應該是絕對.text-content下，使事情變得更加容易：如下：你的CSS（其中用於.img-list取出.team）的更新

/* =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; 
}