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

你只需要调整 HTML:

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

jsFiddle Demo

如果您不希望随着左侧文本变长而调整中心文本，请使用定位 CSS（与我发布的 HTML 相同）。

.align-left {
  position: absolute;
  left: 20px;
}

#wrapper {
  text-align: center;
  position: relative;
}

jsFiddle Demo for positioning

注意...如果您不想调整中心文本，文本可能会重叠。

Answer 2

这样使用

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

Answer 3

我的两分钱。

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>

Answer 4

您可以通过下面的代码实现。文章标签的顺序无关紧要，css 会注意正确放置它们。

<!DOCTYPE html>
<html>
    <head>
        <style type="text/css">
            section {
                border: 1px solid #ff0000;
                overflow: hidden;
                position: relative;
                width: 100%;
            }
            section article.txt {
                border: 1px solid green;
                max-width: 35%;
            }
            section article.left { float: left; }
            section article.right { float: right; }
            
            section article.center {
                --width: 300px;
                position: absolute;
                margin: 0 50%;
                left: calc((var(--width) / 2) - var(--width));
                width: var(--width);
            }
        </style>
    </head>
    <body>
        <section>
            <article class="txt left">Text LEFT side</article>
            <article class="txt right">Text RIGHT side</article>
            <article class="txt center">Text CENTER</article>
        </section>
    </body>
</html>

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

HTML/CSS - Left Align and center on same line

html

css

text-align