Question

所以出于某种原因，我似乎无法将我的图标放在它们所包含的div的中心。我已经尝试将它们包装在div中，直接在css，许多css组合和父类中调用它们只是不会让步。我能让它移动的唯一方法是添加“margin-left”，这在这个响应式设计情况下并不是很好。

这是我的HTML：

<div class="col-lg-4 col-md-4 col-sm-12 col-xs-12">
    <i class="icon-code"> </i>
    <p class="service-description">
        Bacon ipsum dolor sit amet ribeye ham kielbasa, pork ball tip jowl pancetta kevin andouille capicola pastrami frankfurter short ribs tenderloin pork chop.
    </p>
</div>

这是我的CSS：

.service-icons{
    margin-top:6%;
}
.service-icons i{
    text-align: center;
    vertical-align: middle;
    font-color:#c1c1c1;
    color:#c1c1c1;
    font-size:72px;
    transition: all 0.3s ease-in-out 0s;
}
.icon-code i{
    text-align: center;
}
.service-icons i:hover{
    -webkit-transform: scale(0.9, 0.9);
    -ms-transform: scale(0.9, 0.9);
    transform: scale(0.9, 0.9);
    opacity:0.7;
}

直播演示 - Click here

Answer 1

将text-align:center添加到<div class="col-lg-4 col-md-4 col-sm-12 col-xs-12">

Answer 2

尝试使用：margin-left: auto; margin-right: auto，它应该位于页面中间/它所在的任何容器中。

字体令人敬畏中心水平

2 个答案: