CODEWITHSUNDEEP
html
darkchampionz
darkchampionz

Reputation: 1234

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 the above code to align the text in the middle of a div. Code works good, however, is there a way to make it appear on the middle of the div but still one letter to appear above the other?

Example:

enter image description here

Upvotes: 0

Views: 200

Answers (3)

Papershine
Papershine

Reputation: 5223

You could wrap the text with another <div>, make it inline-block and align its contents to the left:

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

.wrapper {
  display: inline-block;
  text-align: left;
}
<div class="test">
  <div class="wrapper">
      This<br>is<br>a<br>test!
  </div>
</div>

Upvotes: 0

Hassan Imam
Hassan Imam

Reputation: 22534

You can use two div to accomplish this. The first div will center align the text and the inner div will align to the left.

.test {
  display:inline-block;
  text-align:left;
}
<div style="text-align: center;background-color: red;">
  <div class="test">
    This<br>is<br>a<br>test!
  </div>
</div>

Upvotes: 1

cjl750
cjl750

Reputation: 4629

Wrap the text in another element, and center that element. The centered element will keep the 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>

Upvotes: 1

Related Questions