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

我想在HTML和CSS中左对齐一些文本，并将另一个文本居中放置在同一行上。我还想在左对齐的文本上留一个

空白

这是我目前的做法：

HTML：

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

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

#wrapper {
  text-align: center;
}

这适用于左对齐和右对齐，但边距也会推动居中文本。我认为这是因为

float:left

在页面流中保持左对齐的文本

---

非常感谢：）

您只需调整HTML：

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

注意。。。如果不希望调整中间文本，则文本可能会重叠。

这样使用

<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>

左边
居中
h1.左对齐{
文本对齐：左对齐；
填充：0；
保证金：0；
位置：绝对位置；
}
h1.1居中对齐{
文本对齐：居中；
}

其他方式：

<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>

左边
居中
h1.左对齐{
填充：0；
保证金：0；
位置：绝对位置；
}
#包装纸{
文本对齐：左对齐；
}
h1.1居中对齐{
文本对齐：居中；
}

我的两分钱

CSS代码：

h1{
  display: inline-block;
}
#center{
  text-align: center;
  width: 80%;
}

#wrapper {
  width: 100%;
}

HTML代码：

<div id="wrapper">
  <h1 id="left">LEFT</h1>
  <h1 id="center">CENTER</h1>
</div>

左边
居中

您可以使用下面的代码实现它。文章标签的顺序无关紧要，css会注意正确定位它们

部分{
边框：1px实心#ff0000；
溢出：隐藏；
位置：相对位置；
宽度：100%；
}
第article.txt节{
边框：1px纯绿色；
最大宽度：35%；
}
第article.left节{float:left；}
第条权利{浮动：权利；}
第节文章中心{
--宽度：300px；
位置：绝对位置；
利润率：0.50%；
左：计算（（var（--width）/2）-var（--width））；
宽度：var（--宽度）；
}
文本左侧
文本右侧
文本中心

显示：内联块；我还没有尝试过这个，但我认为可以使用

行高：0使两行看起来像在一行上。一条线可以左对齐，另一条线可以居中对齐。看见你不需要绝对定位。当你向左侧添加更多文本时，居中元素也会被推到左侧。这是可行的，但我有点困惑，为什么会这样。
位置：绝对位置is将
.align left
从流中取出，并将其
20px
定位到其正常位置的右侧，对吗？我认为，正常位置也是居中的（因为它包含在包装器中）。还有：为什么我需要
位置：relative位置：绝对从0,0或左上角开始。然后从该位置添加/减去任何值。通过将
position:relative
添加到父选择器，可以告诉绝对定位从父元素的0,0开始，而不是从窗口开始。所以在这种情况下，设置<代码>位置：绝对告诉它从
#wrapper
的左侧开始。。然后加
左：20px从左侧向内移动，与边距向内移动的方式相同。或者，我可以添加
h1{position:relative；}
来告诉“left”从h1的0,0开始到包装器，对吗？因为我希望更多的文本也居中。是的，这是可能的，但你必须给位置：绝对，边距，左标题的填充。那就行了。
<div id="wrapper">
  <h1 id="left">LEFT</h1>
  <h1 id="center">CENTER</h1>
</div>