1

基本的にテキストとリンクを持つ div メッセージがあります。その中の文字列に基づいてサイズを変更したい。また、このメッセージ div をコンテナ内の中央に配置したいと考えています。

私はしばらくそれで遊んでいましたが、あまり運がありませんでした。JSfiddle へのリンクは次のとおりです: http://jsfiddle.net/pDYJ8/

また、そのテキストとリンクを次々に表示する方法がわかりません（改行ではありません）

コードは次のとおりです。

<div class="container">
<div class="message">
    <p>do you want to </p> 
    <a href="somewhere" target="_blank">
        buy this product
    </a>
</div>
</div>

.container {
    position: absolute;
    background: #666;
    top:25%;
    width:100%;
    font-size: 15px;
    color: #e47911;
}
.message {
    margin-right: auto;
    margin-left: auto;
    background: #ddd;


    width:100px;   
}

コンテンツに合わせてインライン ブロックを表示しようとしましたが、親の中央に配置されませんでした。

私の要件を模倣するために、今のところ幅100pxを維持します

4

5 に答える 5

1

あなたは物事を複雑にしすぎていると思います。必要なのはtext-align: center、コンテナdisplay: inline-blockの とメッセージのだけです。

.container {
    background: #666;
    font-size: 15px;
    color: #e47911;
    text-align: center;
}
.container .message {
    background: #ddd;
    display: inline-block;
}

http://jsfiddle.net/Pevara/pDYJ8/9/

インライン ブロックは div をテキスト内の単語として機能させ、text-align center は「単語」を中央に揃えます...

于 2013-06-18T18:51:06.127 に答える
1

CSSを微調整するだけ

デモ フィドルを参照してください。

.container {
    position: absolute;
    background: #666;
    top:25%;
    width:100%;
    font-size: 15px;
    color: #e47911;
    text-align: center; /*added*/
}
.container .message {
    display: inline-block; /*added*/
    text-align: left; /*added*/
    background: #ddd;
}

.message p { /*added*/
    display: inline-block;
}

説明

text-align中央は、現在のinline-block表示を中央に表示し、その後、左に背面.messageを持つようにリセットされます(これは必要ありません)。text-alignをa同じ行に表示するには、pもある種のインライン ディスプレイである必要があります。ここでもinline-block同様に選択しました。

于 2013-06-18T18:40:29.533 に答える
0

これは、与えられたいくつかの答えに対する単純化されたアプローチです。必要な HTML と CSS の量を減らします。

CSS

 .container {
      color: #e47911;
      text-align: center;
 }
 .message {
      display: inline;  
      background: #DDDDDD;
 }

HTML

 <div class="container">
      <p class="message">
           Do you want to <a href="somewhere" target="_blank">buy this product</a>?
      </p>
 </div>

私は間違いなくあなたのアンカータグを<a>段落タグの中に入れます<p>.

ではなくにした場合は、display: inline;から削除することもできます。.message<span><p>

于 2013-06-18T19:33:48.617 に答える
0

これをチェックしてください：

http://jsfiddle.net/pDYJ8/10/

上記のリンクに加えられた変更

.container .message {
    margin: 0 auto;
    width:auto;   
}
span{
    background: #ddd;
    display:inline;
}
于 2013-06-18T18:30:06.397 に答える