HTML文本在div中对齐

Question

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

我使用上面的代码来对齐div中间的文本。代码工作得很好，但有没有办法让它出现在div的中间但是仍然有一个字母出现在另一个上面？

示例：

Answer 1

将文本换行到另一个元素中，并将该元素居中。居中元素将保留默认text-align: left。

例如：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

或者这个：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

您可以使用两个div来完成此操作。第一个div将居中对齐文本，内部div将对齐左侧。

＆＃13;

＆＃13;

.test {
  display:inline-block;
  text-align:left;
}

＆＃13;

<div style="text-align: center;background-color: red;">
  <div class="test">
    This<br>is<br>a<br>test!
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 3

您可以使用其他<div>包装文本，将其设为inline-block并将其内容对齐到左侧：

＆＃13;

＆＃13;

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

.wrapper {
  display: inline-block;
  text-align: left;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;