3

テキストが中央揃えの場合、背景のアイコン画像をどのように揃えますか? テキストの前の小さなアイコンのように。中央揃えでない場合は、次のようなものを使用できます。

p { 
  background: url(image.jpg) no-repeat 0 0;
  padding-left: 40px;
}

しかし、次のように中央揃えにすると:

p { 
  background: url(image.jpg) no-repeat 0 0;
  padding-left: 40px;
  text-align: center;
}

テキストが中央に配置されている間、背景は左隅に残ります (そのため、それらの間に大きなギャップがあります)。背景の位置を使用することは可能ですが、画面のサイズが私が使用しているものと異なる場合、背景はテキストに重なってしまいます。

jsFiddle デモを確認できます。

http://jsfiddle.net/PvL3T/2/

4

4 に答える 4

5

:first-letter疑似要素はうまく機能します。http://jsfiddle.net/PvL3T/7/

p { 
  padding-left: 40px;
  text-align: center;
}

.resize:first-letter { 
   background: url(http://www.torontorawveganfestival.com/Images/Pen-icon.png) no-repeat 0 50%; padding-left: 20px;
}

これは、気になる場合は IE6 でも機能しますが、セレクターと開始曲線ブラケットの間に空白がある場合に限ります。IE6 の場合のみ、このようなものは機能しp:first-letter{...ませんがp:first-letter {...、

同様の方法で、次を使用できます:first-line

于 2012-12-18T01:53:11.117 に答える
1

アイコンをテキストの横にインラインで配置したい場合は、親タグ内に配置することを検討してください。次に、画面サイズに関係なく、背景画像をテキストの横に浮かせることができます。

http://jsfiddle.net/PvL3T/4/

HTML:

<p><i class="icon"></i>This is a text that is center aligned.</p>

CSS:

p { 
    text-align: center;
}

p .icon {
    background: url(http://www.torontorawveganfestival.com/Images/Pen-icon.png) no-repeat 0 0;
    width: 12px;
    height: 12px;
    display: inline-block;
    margin-right: 10px;
}
于 2012-12-18T01:44:48.773 に答える
1

テキストの前に行ブロック表示要素を追加する必要があります。そのため、テキスト コンテンツに合わせることができます。例: http://jsfiddle.net/PvL3T/5/

.icon
{
    background: url(http://www.torontorawveganfestival.com/Images/Pen-icon.png) no-repeat center center;
    width: 1em;
    height: 1em;
    display: inline-block;
}​
于 2012-12-18T01:48:25.140 に答える
0

試す：

background: url(image.jpg) no-repeat center;

または代わりに：

background-position: center;
于 2012-12-18T01:40:16.037 に答える