Question

如何在矩形中间对齐此内容词。单词“ test”在顶部。我用了一切，text-align：center;垂直对齐：中间， justify-content：居中，align-items：居中，仍然不起作用

.rectangle {
  height: 75px;
  width: 75px;
  color:white;
  background-color: rgb(77,77,77);
  border-radius:7px;
  text-align:center;
  vertical-align:middle;
  justify-content:center;
  align-items: center;
}

<div class="rectangle"> 
  Test
</div>

Answer 1

您忘了添加display：flex或display：grid：）

.rectangle {
      height: 75px;
      width: 75px;
      color: white;
      display: flex;
      background-color: rgb(77, 77, 77);
      border-radius: 7px;
      justify-content: center;
      align-items: center;
    }

<div class="rectangle">
    Test
  </div>

Answer 2

您几乎拥有了它。您正在使用属性justify-content和align-items，但没有使用这些属性要求的flex显示。此外，由于不再需要text-align: center和vertical-align: middle，我也删除了它们。

.rectangle {
  height: 75px;
  width: 75px;
  color:white;
  background-color: rgb(77,77,77);
  border-radius:7px;
  display: flex;
  justify-content:center;
  align-items: center;
}

<div class="rectangle"> 
  Test
</div>

HTML CSS在矩形中心对齐文本

2 个答案: