Question

我有一个设计，我试图在HTML / CSS中复制：

上面的设计有两个带文字的方框＆＃34; Icon＆＃34;在每个中心。

此时此刻，我可以在fiddle中使用文字＆＃34; icon＆＃34;不在盒子的中心。

我用来获取该框的HTML和CSS代码以及文本＆＃34; icon＆＃34;是：

HTML code：

<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;使图标文字出现在一个方框的中心，但遗憾的是它因某些原因无效：

 .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，这会覆盖内联块设置，所以这些方块不会相互显示。

将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;

因为你知道高度可能很容易用padding-top制作一个div：80px例如

如何将文本放在HTML / CSS中方框的中心？

3 个答案: