Question

我有一些文字，我需要在左边对齐，但保持相同的行格式，就好像它居中一样。这是一个例子。

<!DOCTYPE html>
<html>
<body>

<p>This is some text.</p>
<center>this text is line number one.
<br>this is line 2
<br>this is line number three</center>
<p>This is some text.</p>


</body>
</html>

此代码为您提供此输出：

This is some text.

                            this text is line number one. 
                                   this is line 2 
                              this is line number three
This is some text.

我希望居中的文本向左对齐，但保留格式。即：第一行长，第二行短并居中于第一行，并使第一行的第一个字母一直向左。对不起，如果这没有意义。我不知道怎么解释它。

Answer 1

您可以将段落与text-align:center;一起向左浮动，然后像这样使用clearfix：

＆＃13;

p.center-left {
    text-align:center;
    float:left;
}

.clearfix:before,
.clearfix:after {
  content: " ";
  display: table;
}
.clearfix:after {
  clear: both;
}

＆＃13;

<p>This is some text.</p>
<p class="center-left">this text is line number one.
<br>this is line 2
<br>this is line number three</p>
<div class="clearfix"></div>
<p>This is some text.</p>

＆＃13;

Answer 2

＆＃13;

.centered {
    text-align : center;
    display : inline-block;
}

.left-aligned {
    /* no need to float : left in this case */
}

＆＃13;

<p>This is some text.</p>
<div class="left-aligned">
    <div class="centered">
        <div>this text is line number one.</div>
        <div>this is line 2</div>
        <div>this is line number three</div>
    </div>
</div>
<p>This is some text.</p>

＆＃13;

我使用了两个<div>，使父文本与左边的文本对齐（不需要css属性float : left），而子文件将具有两个属性，一个要将内容text-align : center居中，并与display : inline-block结合使用，由于inline-block属性，您的宽度可能最小。

Answer 3

我不是100％肯定你的意思，但告诉我这是你想要的结果吗？

HTML：

<body>

<p>This is some text.</p>
<div class="center">this text is line number one.
<br>this is line 2
<br>this is line number three</div>
<p>This is some text.</p>


</body>

CSS：

.center
{
    width: 50%;
    margin:auto;
}

小提琴：

https://jsfiddle.net/u2geno6u/

Answer 4

＆＃13;

div.centered {
  border: 1px solid red;
  text-align: center;
  display: inline-block;
}

＆＃13;

<!DOCTYPE html>
<html>
<body>

<div>
    <p>This is some text.</p>
        <div class="centered">
            this text is line number one.
            <br>this is line 2
            <br>this is line number three
        </div>
    <p>This is some text.</p>
</div>

</body>
</html>

＆＃13;

Answer 5

将文本放在带有display：inline-block的div中，然后将文本居中

Here is a codepen

HTML：

<!DOCTYPE html>
<html>
    <body>
        <div style="display: inline-block">
            <p>This is some text.</p>
            <p>this text is line number one.</p>
            <p style="text-align: center">this is line 2</p>
            <p style="text-align: center">this is line number three</p>
            <p>This is some text.</p>
        </div>
    </body>
</html>

如何将文本左对齐，但将其格式化为就像它居中一样

5 个答案: