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

【问题标题】：HTML/CSS - Left Align and center on same lineHTML/CSS - 左对齐并居中在同一行
【发布时间】：2016-06-04 08:55:27
【问题描述】：

我想在 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 在页面流中保持左对齐文本。

非常感谢你:)

【问题讨论】：

display:inline-block;
我没试过这个，但我想你可以在css中使用line-height:0; 让两行看起来好像在一行上。一条线可以向左对齐，另一条线可以居中。看; codepen.io/anon/pen/wWayPB 这个不需要绝对定位。

标签： html css text-align

【解决方案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>

【讨论】：

也可以将text-align: center; 添加到包装器中，对吗？因为我也希望更多文本居中。
是的，这是可能的，但你必须给出位置：绝对，边距，左边距。然后它会工作。

【解决方案2】：

我的两分钱。

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>

【讨论】：

【解决方案3】：

你只需要调整 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

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

【讨论】：

当您向 LEFT 添加更多文本时，居中的元素也会被推到左侧。
这行得通，但我有点困惑，为什么会这样。 position: absolute; 将.align-left 从流中取出并将20px 定位在其正常位置的右侧，对吗？我认为，正常位置也是居中的（因为它包含在包装器中）。另外：为什么包装器需要position: relative;？
position: absolute; 开始在 0,0 或左上角。然后从该位置添加/减去任何值。通过将position: relative 添加到parent 选择器，您可以告诉绝对定位从父元素 的0,0 开始，而不是从窗口开始。所以.. 在这种情况下，在“左侧”文本上设置 position: absolute; 会告诉它从 #wrapper.. 的左侧开始。然后添加 left: 20px; 从左侧移动，就像你的边距移动它一样向内的。或者，我可以添加 h1 {position: relative;} 来告诉“left”从 h1 的 0,0 开始。

【解决方案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>

【讨论】：