html - 如何在 HTML/CSS 中将文本置于方框的中心？

Question

我尝试在 HTML/CSS 中复制下面的设计:

上面的设计有 2 个框，每个框的中心都有文字“图标”。

此刻，我可以在 fiddle 中得到这个文本“图标”不在框的中心。

我用来获取该框和文本“图标”的 HTML 和 CSS 代码是:

HTML代码:

<div class="squares">
      <div class="icon1">
         <p>Icon</p>
      </div>
      <div class="icon2">
         <p>Icon</p>
     </div>
 </div>

CSS 代码:

.icon1,
.icon2 {
    width: 200px;
    height: 200px;
    display: inline-block;
    background: #F5F8FA;
}

.icon1 {
    margin-right: 10%;
    border-style: ridge;
}

.icon2 {
    margin-left: 10%;
    border-style: ridge;
}

我想我必须把 display: flex;对齐元素:居中； justify-content: center; 使图标文本位于框的中心，但不幸的是由于某些原因它不起作用:

 .icon1 {
        margin-right: 10%;
        border-style: ridge;
        display: flex;
        align-items: center;
        justify-content: center;
    }   

 .icon2 {
        margin-left: 10%;
        border-style: ridge;
        display: flex;
        align-items: center;
        justify-content: center;
        }

Answer 1

你在那里有一个矛盾:你将两者的 display 设置为 inline-block，然后在下面的规则中你将它设置为 flex，它会覆盖内联 block 设置，因此方 block 不会彼此相邻显示。

将 display: flex 应用到父级 (.squares) 并清除内联 block 设置:

.squares {
  display: flex;
  justify-content: center;
}
.icon1,
.icon2 {
    width: 200px;
    height: 200px;
    background: #F5F8FA;
}


 .icon1 {
        margin-right: 10%;
        border-style: ridge;
        display: flex;
        align-items: center;
        justify-content: center;
    }   

 .icon2 {
        border-style: ridge;
        display: flex;
        align-items: center;
        justify-content: center;
        }

<div class="squares">
      <div class="icon1">
         <p>Icon</p>
      </div>
      <div class="icon2">
         <p>Icon</p>
     </div>
 </div>