在居中的文本中右对齐第二行答案

【问题标题】：Right align second line in centered text在居中的文本中右对齐第二行
【发布时间】：2012-11-13 12:24:26
【问题描述】：

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

我有一个文本应该分两行显示：想象第一行是“hello world”，第二行是“goodbye”

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

你好世界再见

我将其用作第一次尝试，但我得到的只是两条线都居中。我需要让第二行向右对齐。

div#logo { 明确：两者；填充：1em；边框：0；保证金：1em自动；文本对齐：居中；宽度：75%； }

谢谢。

【问题讨论】：

你可以在两个单独的divs 中创建“hello world”和“goodbye”，style 和 margin: 0; padding: 0;
试过了，但问题是我需要第二行与第一行对齐。
绝对没有 jQuery？很容易做到这一点。
不幸的是没有 jQuery。要求仅使用 CSS 执行此操作。
我假设您无法在该 div 上设置特定宽度？

标签： html css responsive-design

【解决方案1】：

最简单的解决方案：让你的段落向右对齐，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

【讨论】：

不解决居中的页面部分。

【解决方案2】：

HTML：

<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;}

【讨论】：

也许更好的选择：First line Remining Text
@Dan：问题错了。如果无法正确阅读问题下方的 cmets，您需要在两行上正确对齐的文本才能在某个容器内居中？这很容易实现，只是问题不清楚。

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

【讨论】：

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

我相信这就是你想要的。

【讨论】：

不幸的是它不是，因为这不会使两条线在屏幕中心对齐，而是在 xx-75% 范围内。

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

【讨论】：

我需要第二行显示与第一行的最后一个字母右对齐

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

宽度 - 必须知道和预先设置，不一定在 CSS 中您可以使用内联样式
margin - 顶部和底部 0px，左右平衡

.第一行：

浮动 - 向左

.二线

浮动 - 向右

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

【讨论】：

不显示两条线居中对齐，第二行也不是相对于第一行右对齐：jsfiddle.net/FTda6