时间戳

首页 > 解决方案 > HTML CSS 在矩形中心对齐文本

html - HTML CSS 在矩形中心对齐文本

问题描述

如何在矩形中间对齐这个内容词。“测试”一词位于顶部。我什么都用了， text-align:center; 垂直对齐：中间，对齐内容：中心，对齐项目：居中，但仍然无法正常工作

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

标签： htmlcsstwitter-bootstrap

解决方案

你几乎拥有它。您正在使用属性justify-content和align-items，但不是flex这些属性工作所需的显示。此外，我删除了text-align: centerand 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>

推荐阅读