Question

好的所以我有3个css圈子，里面有图标字体，现在我不能让我的生活在它的父母内部居中。而不是排队他们堆叠在一起，我使用浮动：左解决这个，但它搞砸了我的整个悬停。

Take a look here，只需转到投资组合部分，然后将鼠标悬停在其中一个成员上。

如何看待：

enter image description here

外观如何：

enter image description 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

您必须从课程display :table中删除.social-icon-holder，然后才能添加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 3

来自我的评论：http://jsfiddle.net/h7kJS/完整结果：http://jsfiddle.net/h7kJS/2/embedded/result/ .social-icon-holder可以显示为inline-table（inline-block + line-height也可以。）

图片应位于.text-content下的绝对位置，以简化操作：下方：更新CSS（.team移除了.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

可以吗？试试这段代码

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

   display: block;
   margin: 0 auto;
}

Answer 5

尝试这样做：

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

在css圈中居中图标字体，在父母的内部

5 个答案: