Question

我需要像这样说两个字：

                               Word1
                               word2 is loneger

要在左侧对齐它们，但第二个单词以div为中心。

Answer 1

如果问题是能够将一段文字居中，但保持其中的文字左对齐，则可以通过flexbox CSS处理：

.centred {
  display: flex;
  justify-content: center
}

<div class="centred">
  <p>
    Short<br/>
    Muchlongererererererererer
  </p>
</div>

Answer 2

这是您在帖子中向我们展示的内容文本左对齐但位于中心

<style>
.parent {
	text-align: center;
}

.div {
	display: inline-block;
	width: 150px;
	text-align: left;
}
</style>

<div class="parent">
	<div class="div">Word1</div><br/>
	<div class="div">word2 is loneger<div>
</div>

Answer 3

我不知道我是否正确理解了问题（由于缺乏上下文），但由于text-align: left是默认的属性值，我解决此问题如下：

HTML：

<div>
    <p>Word1</p>
    <p>Word2 is longer</p>
</div>

CSS：

div p:last-child {
    text-align: center;
}

Answer 4

我没有真正得到你的问题，但我希望这会有所帮助......

输出，使用以下代码：

<html>
    <head>
        <style>
            .a{
                position:absolute;
                left:45%;
                text-align:centre;
            }
       </style>
    </head>
    <body>
        <div class="a">
            <p>
                word1<br/>word2 is loneger.
            </p>
        </div>
    </body>
</html>

输出，

使用此代码

<html>
    <head>
    </head>
    <body>
        <div>
            <p>
                word1<br/>word2 is loneger.
            </p>
        </div>
    </body>
</html>

对齐左边的单词，但保持一个居中

4 个答案: