在 Materialise CSS 中，如何在卡片面板中将 Font Awesome 图标居中？答案

【问题标题】：In Materialize CSS, how do you center Font Awesome icons in the card-panels?在 Materialise CSS 中，如何在卡片面板中将 Font Awesome 图标居中？
【发布时间】：2018-02-21 00:57:12
【问题描述】：

我的内容与 Materialise CSS 库中使用的卡片对齐时遇到了问题。我一直在尝试找到一种方法，使我的 Font Awesome 图标保持在指定的卡片面板中相对的纵横比。我的标签和类有什么问题吗？

HTML：

<body>
<div class="row">
    <div class="col s3">
        <div class="card-panel teal grey darken-1 center-block">
            <center><a class="icon" href="" target="_blank"><i class="fa fa-linkedin fa-4x"></i></a></center>
        </div>
    </div>
    <div class="col s3">
        <div class="card-panel teal grey darken-1 center-block">
            <center><a class="icon" href="" target="_blank"><i class="fa fa-github fa-4x"></i></a></center>
        </div>
    </div>
    <div class="col s3">
        <div class="card-panel teal grey darken-1 center-block">
            <center><a class="icon" href="" target="_blank"><i class="fa fa-twitter fa-4x"></i></a></center>
        </div>
    </div>
    <div class="col s3">
        <div class="card-panel teal grey darken-1 center-block">
            <center><a class="icon" href="" target="_blank"><i class="fa fa-codepen fa-4x"></i></a></center>
        </div>
    </div>
</div>
</body>

CSS：

body {
  background-image:url(https://s-media-cache-ak0.pinimg.com/originals/c7/5d/e1/c75de1208bf12c355ad1ba4264787b18.jpg);
  background-size:cover;
  color:white;
  position:relative;
}

.card-panel {
 display: flex;
 text-align: center;
}

.icon {
  text-align: center;
}

.fa {
  position: relative;
}
.fa:hover {
  color:white
}

现在在桌面上，我的卡片面板上的图标仍然在每张卡片的左侧偏移： https://i.stack.imgur.com/dWhix.png

在移动设备上也可以看到相同的情况，除了这次图标不仅偏移，而且它们也不响应每个卡片面板的宽度： https://i.stack.imgur.com/K0PS6.png

所以为了完成这个格式化任务，我怎样才能使每个图标与每个给定的卡片面板对齐和使其对不同的屏幕尺寸做出响应？最后，这可以使用已经是 HTML 和 CSS 一部分的属性来完成，还是我必须为此实现 Flexbox 或 CSS Grid 等框架？

【问题讨论】：

标签： html css css-selectors materialize responsive

【解决方案1】：

当我从卡片面板中删除 display: flex; 时

.card-panel {
 text-align: center;
}

它对我有用

【讨论】：

移除“display: flex;”至少重新对齐了页面的卡片面板，但图标仍然保持在之前的确切位置。我的目标是让图标位于每个卡片面板的中心，而不考虑卡片的宽度以响应屏幕尺寸。
在我创建的这个代码笔中，我试图理解你的问题和我提出的修复方案，无论我的 Windows 机器上的窗口大小如何，图标都位于卡片面板的中心codepen.io/chartman4/details/vdRaGm 不确定我是什么不见了。