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>