HTML text align in div -

.test {    background-color: red;    text-align: center;  }

<div class="test">    this<br>is<br>a<br>test!  </div>

i use above code align text in middle of div. code works good, however, there way make appear on middle of div still 1 letter appear above other?

example:

wrap text in element, , center element. centered element keep default text-align: left.

for example:

.test {    background-color: red;  }  .test div {    margin: 0 auto;    width: 28px;  }

<div class="test">    <div>this<br>is<br>a<br>test!</div>  </div>

or this:

.test {    background-color: red;    display: flex;    justify-content: center;  }

<div class="test">    <div>this<br>is<br>a<br>test!</div>  </div>