Question

很抱歉，如果标题不是很清楚，但我正在试图弄清楚如何使用CSS解决以下问题。

我有一个文本应该以两个不同的方式显示：想象第一行是“hello world”，第二行是“goodbye”

我需要以这种方式在屏幕中心中显示文字：

hello world
    goodbye

我正在使用它作为第一次尝试，但我得到的是两条线都居中。我需要让第二行与右边对齐。

div#logo {
    clear: both;
    padding: 1em;
    border: 0;
    margin: 1em auto;
    text-align: center;
    width: 75%;
}

谢谢。

Answer 1

<强> HTML：



<div id="logo"><p>First line<br />Remaining Text</p></div>

<div id="logo"><p>First line<br />Remaining Text</p></div>

<强> CSS：

div#logo {text-align:center;}
div#logo p {display:inline-block; text-align:right;}

Answer 2

最简单的解决方案：让您的段落向右对齐，max-width设置为第一行的宽度，第二行将自动断开并与右侧对齐。

<强> HTML

<div id="logo">
    <p>Hello World goodbye!</p>
</div>

<强> CSS

#logo
{
    display:block;
    width:100px;
    position:relative;
    margin-left:auto;
    margin-right:auto;
}
#logo p
{
    max-width:80px;
    text-align:right;
}

这是一个功能fiddle

Answer 3

如果您知道徽标div中文本的宽度，那么这是一件相对简单的事情，如果您不这样做，我相信您将需要jQuery来完成它。

<div id="logo">
    <p class="right">
    hello world<br />
    goodbye
    </p>
</div>


div#logo {
clear: both;
padding: 1em;
border: 0;
margin: 1em auto;
text-align: center;
width: 75%;
position:relative;
height:100px; 
}

.right{
position:absolute;
width:90px;
margin-left:-45px;
}

演示：http://jsfiddle.net/calder12/QnGDs/1/

Answer 4

如果您将该文本放在p元素中，如：

<div id="logo">
<p>Hello world <br />goodbye</p>
</div>

并应用以下css：

div#logo
{
width: 75%;
margin: 0px auto;
}

#logo p
{
text-align: right;
}

我相信这就是你想要的。

Answer 5

如何将第二行放入其他容器中，然后将其推向正确的

<div id="logo">
hello world<br/>
<span class="right">goodbye</span>
</div>


div#logo {
clear: both;
padding: 1em;
border: 0;
margin: 1em auto;
text-align: center;
width: 75%;
}

.right {
text-align: right;
float: right;
}

Answer 6

仅在宽度已知或预设

的情况下

<div class="wrapper">  
    <div class="first-line">hello word</div>  
    <div class="second-line">goodbye</div>  
</div>`

<style>  
    .wrapper{ width: 70px; margin: 0 auto;}  
    .first-line { float: left;}  
    .second-line{ float: right;}  
</style>`

<强>解释
.wrapper：

width - 必须是已知的，并且不一定在css中预设，您可以使用内联样式
margin - 顶部和底部0px左右均衡

.first-line：

浮动 - 向左

。第二行

浮动 - 向右

请查看链接以查看工作示例 http://jsfiddle.net/pQTBz/

右对齐居中文本中的第二行

6 个答案: