1

タイトルがはっきりしない場合は申し訳ありませんが、CSSを使用して次の問題を解決する方法を見つけようとしています。

2つの異なる行で表示する必要があるテキストがあります。最初の行が「helloworld」で、2番目の行が「goodbye」であると想像してください。

画面の中央に、このようにテキストを表示する必要があります。

こんにちは世界
    さようなら

これを最初の試みとして使用していますが、両方の線が中央に配置されているだけです。2行目を右揃えにする必要があります。

div＃logo {
    明確：両方;
    パディング：1em;
    ボーダー：0;
    マージン：1em自動;
    text-align：center;
    幅：75％;
}

ありがとうございました。

4

6 に答える 6

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 に答える
1

最も簡単な解決策：最初の行の幅に設定して段落を右に揃えるとmax-width、2番目の行が自動的に途切れて右に揃えられます。

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 に答える
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

そのテキストを次のような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

2行目を他のコンテナに入れて、右に押してみませんか

<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 に答える
-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

.first-line：

  1. フロート-左に

。二行目

  1. フロート-右へ

リンクを確認して、実際の例 http://jsfiddle.net/pQTBz/を確認してください。

于 2012-11-13T12:40:26.003 に答える