Google 图标不会对齐或浮动居中

Question

我想在标题上方的 div 中添加居中对齐的 google 图标作为图形，但我无法居中对齐或浮动。我只能左对齐或左右浮动，不能居中

Screenshot of icon aligned left

CSS 代码都没有像我预期的那样工作。

<div id="comps">
      <div class="dark">
        <i class="material-icons" style="font-size:48px;">cloud</i>
        <h3>Competencies</h3>

.material-icons {
  text-align: center;
}
.material-icons {
  float: center;
}

Answer 1

    .center {
      display: flex;
      justify-content: center;
    }

<div id="comps">
          <div class="dark">
            <i class="center" style="font-size:48px;">cloud</i>
            <h3 class="center" >Competencies</h3>

Google 图标不会对齐或浮动居中

Google Icons won't align or float center

html

css

formatting

alignment