1

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

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

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

你好世界
    再见

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

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

谢谢你。

4

6 回答 6

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

​ 这是一个功能性的小提琴

于 2012-11-13T12:52:18.140 回答
1

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

于 2012-11-13T12:50:31.267 回答
0

如果您知道徽标 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/

于 2012-11-13T12:55:05.267 回答
-1

仅在宽度已知或预设的情况下

<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：

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

。第一行：

  1. 浮动 - 向左

。第二行

  1. 浮动 - 向右

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

于 2012-11-13T12:40:26.003 回答
-1

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

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

并应用以下CSS：

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

#logo p
{
text-align: right;
}

我相信这就是你想要的。

于 2012-11-13T12:27:16.633 回答
-1

将你的第二行放在其他容器中然后将其推向右侧怎么样

<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;
}
于 2012-11-13T12:30:30.490 回答