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>

Answer 2

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

我的两分钱。

CSS代码：

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

#wrapper {
  width: 100%;
}

HTML code：

<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 - 左对齐并居中于同一行

4 个答案: