-1

ここで引き戸技術に問題があります。スライドドアの技法により、説明の直後の見出しが左に浮いていますが、私が望むのは、製品の上、中央に単独で立っていることだけです。

それを行う方法を理解するのを手伝ってもらえますか?

見出しに使用した CSS は次のとおりです。

h3.offer-title, h3#comments, h3#reply-title  {
background:url(images/offer-title-bg.png) no-repeat right bottom;
color:#434343;
display:block;
float:left;
font-size: 14px;
margin-right: 6px;
padding-right:6px;
text-decoration:none;
height: 43px;
line-height: 0;
position: relative; }

h3.offer-title span, h3#comments span, h3#reply-title span {
background:url(images/offer-title-bg.png) no-repeat;
display:block;
padding-left: 20px;
height: 43px;
line-height: 43px;
padding-right: 16px;
}

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

4

1 に答える 1

0

float: left最初の CSS コード ブロックを設定したため、フローティングになっています。その動作を取り除くには、フロートを取り除く必要があります。

フロートがなくなったら、以前のようにヘッダーの背景をテキストにうまく合わせたい場合は、要素にdisplay: inline-block.

ただしdisplay: inline-block、ヘッダーに幅が設定されていない場合 (幅を追加することはできますが、テキストやフォント サイズを変更すると壊れる可能性があります)、中央に配置されません。中央に配置するには、 を持つラッパー要素が必要ですtext-align: center。

そう：

  1. このブロックを追加します。

    h3.offer-title {
    display: inline-block; /* this makes the bg fit the text */
    float: none; /* this overrides float:left */
}

  2. offer-title要素を別の div でラップします。

  3. ラッパーをスタイルする

     .offer-title-wrapper {
    text-align: center;
}
于 2012-10-26T17:54:55.677 に答える