html - 带有浮动的居中图标：左

Question

我的居中图标有问题

CSS：

.icons .overview {
    position: relative;
    float: left;
    width: 16.6666666667%;
    text-align: center;
    overflow: visible;
}

.icon {
    display: inline-block;
    width: 64px;
    height: 64px;
    cursor: help;
    margin-bottom: 20px;
}

而且我的团队也有问题。

.team-list { text-align: center; padding: 50px 0px 30px; float: left;}

我无法居中。

网站：http : //www.plus-seo.pl/ 类别“Oferta”有什么想法吗？

Answer 1

Don't float the list element, set them to display: inline-block.

.icons .overview {
    display: inline-block;
    overflow: visible;
    position: relative;
    width: 16.6667%;
}

Answer 2

You just need to replace "float:left;" to "display:inline-block;", because by giving specific margin to fix the alignment, can give issue in responsive layout.

So your code should be :

.icons .overview {
    position: relative;
    display:inline-block; /*UPDATED*/
    width: 16.6666666667%;
    text-align: center;
    overflow: visible;
}

Hope this should resolve your issue!

Answer 3

给margin-left你的概述课一些。

.icons .overview {
    position: relative;
    float: left;
    width: 16.6666666667%;
    text-align: center;
    overflow: visible;
    margin-left: 60px;
}