21

アイコン（左）とテキスト（右）、または反対のテキストを左に、アイコンを右に配置する最良の方法は何ですか?

アイコンの画像とテキストは同じサイズにする必要がありますか? 理想的には、それらは異なるが、同じ垂直方向の配置にあることを望みます.

大きな画像からアイコンを取得するために background-position css プロパティを使用しています。

これが私が今やっている方法ですが、それらを同じ行に配置するか、下に垂直に配置するのに苦労しています。

文章

これは、私があなたの提案を試した後に得られるものです。

テキストはアイコンに合わせて配置されましたが、必要なアイコンの右側に重ねて表示されています。より大きな画像セットからアイコンを表示するために背景位置を使用していることに注意してください。

基本的に私は得ています

<icon><10px><text_and_unwanted_icon_to_the_right_under_it>
<span class="group3_drops_icon group3_l_icon" style="">50</span>

group3_drops_icon {
background-position:-50px -111px;
}

.group3_l_icon {
-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;
background:transparent url(/images/group3.png) no-repeat scroll left center;
height:35px;
overflow:hidden;
padding-left:55px;
}
4

3 に答える 3

37

私は通常使用しますbackground：

<style type="text/css">
.icon {
background-image: url(path/to/my/icon.jpg);
background-position: left center;
background-repeat: no-repeat;

padding-left: 16px; /* Or size of icon + spacing */
}
</style>

<span class="icon">Some text here</span>
于 2010-06-23T23:38:41.083 に答える
27

vertical-align と line-height を使用して同じ行で実行できます

<p style='line-height: 30px'>
  <img src='icon.gif' style='vertical-align: middle' />Icon Text
</p>

または、リピートなしとポジショニングを使用してバックグラウンド アプローチを使用することもできます。

span.icontext {
  background: transparent url(icon.gif) no-repeat inherit left center;
  padding-left: 10px /* at least the width of the icon */
}

<span class="icontext">
  Icon Text
</span>
于 2010-06-23T23:36:06.510 に答える
14

悲しいことに、これらの答えはどちらも絶対的な証拠ではなく、それぞれに 1 つの大きな欠点があります。

@rossipedia私はすべてのアイコンをこの方法で実装していましたが、非常にうまく機能します。しかし、これは大きな問題ですが、テキストを含むコンテナー内にアイコンを配置するために background-position プロパティを使用しているため、スプライトでは機能しません。また、可能な限りスプライトを使用しないことは、パフォーマンスと SEO に悪影響を及ぼします。

@Jamie Wong 最初のソリューションには、マークアップに 2 つの欠陥があります。要素をセマンティックに正しく使用することは、悲しいことに過小評価されている人もいますが、検索エンジンのランキングでフォームを優先することには利点があります。まず第一に、コンテンツが段落でない場合は p-tag を使用しないでください。代わりにスパンを使用してください。次に、img タグはコンテンツ専用です。非常に特殊なケースでは、このルールを無視する必要があるかもしれませんが、これはその 1 つではありません。

私の解決策：私はあなたに嘘をつきません。私はこれまでに多くの場所をチェックインしましたが、私見では最適な解決策はありません。ただし、これらの 2 つのソリューションはそれに最も近いソリューションです。

インライン ブロック ソリューション

HTML:
<div class="container">
  <div class="icon"></div>
  <span class="content">Hello</span>
</div>

CSS:
.container {
   margin-top: 50px;
}

.container .icon {
    height: 30px;
    width: 30px;
    background: #000;
    display: inline-block;
    vertical-align: middle;
}
.container .content {
    display: inline-block;
    vertical-align: middle;
}

「表示：インラインブロック;」美しいものです。あなたはそれで多くのことができ、レスポンシブデザインで非常にうまく機能します. しかし、それはクライアント次第です。Inline-Block は IE6、IE7 ではうまく機能せず、IE8 でも問題が発生します。私は個人的に IE6 と 7 をサポートしなくなりましたが、IE8 はまだサポートされています。クライアントが Web サイトを IE8 で使用できるようにする必要がある場合、残念ながらインライン ブロックは選択できません。これをまず評価します。icon-element の黒い背景をスプライトに置き換えて配置し、そこに no-repeat をスローすると、出来上がりです。そうそう、プラスとして、垂直方向の配置を使用して、テキストを好きなように配置できます。

PS: そこに空の HTML タグがあることは承知しています。それを埋める方法について誰か提案があれば、私は感謝します。

高さ固定ソリューション

.clearfix:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
}

.clearfix {
    display: inline-block;
}

html[xmlns] .clearfix {
    display: block;
}

* html .clearfix {
    height: 1%;
}
.container {
    margin-top: 50px;
    border: 1px solid #000;
}

.container .icon {
    height: 30px;
    width: 30px;
    background: #000;
    float:left;
}
.container .content {
    line-height: 30px;
    float: left;
    display: block;
}

私はこれが嫌いです。テキストには固定行の高さが使用され、アイコンのボックスと同じ高さを選択すると、テキストはその高さに中央揃えされます。テキストを上に揃えるには、行の高さをカットします。下に関しては、それを position: absolute で固定し、コンテナの幅と高さを固定する必要があります。誰かがそれを要求しない限り、私はそれに入るつもりはありません. このパスの主な欠点は、高さが固定されていることです。固定された高さは常に柔軟性がなく、特にテキストの場合、多くの問題を引き起こす可能性があります (テキストを切り取らずにユーザーとして拡大縮小することはできなくなります。さらに、ブラウザーによってテキストのレンダリングが異なります)。そのため、どのブラウザーでもテキストが途切れないようにし、行の高さの内側に小刻みの余地があることを確認してください。PS: コンテナーの clearfix を忘れないでください。そしてもちろん、黒い背景をスプライトに置き換えて、位置に応じて + 繰り返しなしにします。

結論

可能であればインラインブロックを使用してください。;) そうでない場合は、深呼吸して 2 番目の解決策を試してください。

于 2014-03-04T09:09:41.967 に答える