如何在HTML / CSS中將文本置於方形框的中心？

Question

我有一個設計，下面嘗試在HTML / CSS中復制：

上面的設計有2個框，每個框的中間都有文本“ Icon”。

目前，我可以將文本“ icon” 擺在盒子中央而不是小提琴 。

我用來獲取該框的HTML和CSS代碼以及文本“ icon”是：

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; align-items: center; justify-content: center; display: flex; align-items: center; 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 ，這會覆蓋inline-block設置，因此正方形將不會彼此相鄰顯示。

將display: flex應用於父級（ .squares ）並清除行內塊設置：

 .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> 

Answer 2

您可以像這樣在父div上使用flex屬性，您將獲得所需的結果

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

Answer 3

你可以試試

text-align: center; /* horizontal align */
display: table-cell; /*display as table cell to make possible vertical align */
vertical-align: middle;

因為您知道height可能很容易用padding-top在里面再加一個div：例如80px