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

不要浮动列表元素，将它们设置为display: inline-block。

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

Answer 2

为您的概述课程提供一些margin-left。

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

Answer 3

您只需将“float:left;”替换为“display:inline-block;”，因为通过提供特定的边距来修复对齐方式，可能会在响应式布局中出现问题。

所以你的代码应该是：

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

希望这可以解决您的问题！

带浮动的中心图标：左侧

3 个答案: