HTML/CSS - 左对齐并在同一行居中

Question

我想在 HTML 和 CSS 的同一行上左对齐一些文本并将另一个文本居中。我还希望在左对齐文本上有一个 margin-left。

这是我目前的做法:

HTML:

<div id="wrapper">
  <h1 class="align-left">LEFT</h1>
  <h1>CENTER</h1>
</div>

CSS:

.align-left {
  float: left;
  margin-left: 20px;
}

#wrapper {
  text-align: center;
}

这适用于左右对齐，但边距也会插入居中文本。我认为这是因为 float: left 在页面流中保持左对齐文本。

非常感谢:)

Answer 1

这样使用

<div id="wrapper">
  <h1 class="align-left">LEFT</h1>
  <h1 class="align-center">CENTER</h1>
</div>
<style>
h1.align-left {
    text-align:left;
    padding:0;
    margin:0;
    position:absolute;
}

h1.align-center{
  text-align: center;
}
</style>

其他方式:

<div id="wrapper">
  <h1 class="align-left">LEFT</h1>
  <h1 class="align-center">CENTER</h1>
</div>
<style>
h1.align-left{
    padding:0;
    margin:0;
    position:absolute;
}
#wrapper {
    text-align:left;
}

h1.align-center{
  text-align: center;
}
</style>