居中在css圆形，在父母内部的图标字体 [英] Centering icon font in css circle, inside of parent

问题描述

好的，所以我有3个css圈子与图标字体集中在他们的内部，现在我不能为我的生活得到它集中在其父。也不是排队，他们堆叠在彼此的顶部，我使用float：left来解决这个，但它搞砸了我的整个悬停。

对于这个JsFiddle，我使用了一个占位符背景图片。

社交图标中心，我这样做：

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

JsFiddle

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

解决方案

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

这篇关于居中在css圆形，在父母内部的图标字体的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！