HTML CSS Align Text In Center of Rectangle

Question

How do I align this content word in middle of rectangle. Word 'test' is on the top. I used everything, text-align:center; vertical-align:middle, justify-content:center, align-items: center, and still not working

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

score 7 · Accepted Answer · answered Jul 11 '19 at 23:52

You almost had it. You're using the properties justify-content and align-items, but not the flex display that these properties require to work. Furthermore, I removed text-align: center and vertical-align: middle, as they are no longer needed.

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

score 3 · Answer 2 · answered Jul 11 '19 at 23:51

You forgot to add display: flex or 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>

HTML CSS Align Text In Center of Rectangle

2 Answers2