Html 把我的图标放在div的中间，对于手持设备，而不是浏览器

请查看此网站页脚上的社交小部件：

此屏幕抓图来自Microsoft Edge：

我似乎无法使这些图标在标题下居中。在我的手持设备（如iPhone）上，它确实显示：

这是小部件的HTML：

<div class="textwidget">
    <div class="social animateblock">
        <div class="fa-icons">
            <a href="https://www.facebook.com/publictalksoftware/" rel="noopener noreferrer" target="">
            <i class="fa fa-facebook"></i></a>
            <a href="https://www.youtube.com/channel/xxx" rel="noopener noreferrer" target="">
            <i aria-hidden="true" class="fa fa-youtube-play">
            </i></a>
            <a href="https://www.publictalksoftware.co.uk/feed/" rel="noopener noreferrer" target="">
            <i class="fa fa-rss"></i></a></div>
    </div>
</div>

---

我已经尝试过将左边和右边的边距设置为“自动”，但它不适用于浏览器。困惑。

要使内容居中，请将以下样式添加到

.textWidget

类中：

display: flex;
justify-content: center;

注意：我调整了填充，只保留了顶部10px的间距。当然，您可以根据需要更改填充。这是你的计划

我使用谷歌Chrome浏览器中的开发者工具应用了这些样式。您的里程数可能会有所不同，但在您在站点上设置的不同断点之间，样式似乎保持了相当稳定。以下是我测试的一些截图：

以下是应用flexbox之前的元素（视口宽度：824px）

以下是应用flexbox后的元素（视口宽度：824px）

---

不管怎样，我希望这对你有帮助。干杯，祝你好运

移除

浮动：左侧

从这个选择器

.social.fa图标
@ZohirSalak谢谢。我似乎无法使用元素检查器在该文件
https://www.publictalksoftware.co.uk/wp-content/themes/seos-video-premium/seos-video-premium/style.css?ver=5.3
我可以通过Firefox浏览器检查器看到它。我在我的网站上添加了一些自定义CSS，现在它们都集中了。谢谢，我找到了一个摆脱左边那个“正方形”的方法。。。但这是另一个问题。您需要添加类
.fa
或
.fas
，用于指定答案的其余样式库。我投了一票。但是我已经采纳了评论中提供的建议，这些建议直接修复了小部件中令人不快的元素样式。