如何在同一个div中获得不同的文本对齐方式？

Question

我做了这个div：

<div id="MyDiv"><h>HeaderText</h><br>

            DivText

</div>

我想使HeaderText集中并且将DivText左对齐。因为HeaderText CSS text-align: left;位于div中，所以与div CSS相矛盾。

我希望它位于其中，以便保持div的背景格式，位置等。

Answer 1

您可以将DivText包裹在另一个<div>中。见下文：

#MyDiv {
  width: 100px;
  border: 1px solid black;
}

header {
  text-align: center;
}

div.inner{
  text-align: left;
}

<div id="MyDiv">
  <header>HeaderText</header><br>
  <div class="inner">DivText</div>
</div>

Answer 2

这很好。我建议是因为您在代码中使用了未知标签<h>

h1 {
  text-align: center;
}

<div id="MyDiv">
  <h1>HeaderText</h1>

  DivText

</div>