web-dev-qa-db-ja.com

アイコンをテキストに合わせる

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

アイコン画像とテキストは同じサイズでなければなりませんか？理想的には、それらは異なるが、同じ垂直方向の配置になります。

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;
}
csscss-sprites
20
badnaam

私は通常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>
37
rossipedia

あなたは、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>
24
Jamie Wong

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

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

@Jamie Wong最初のソリューションには2つのマークアップの欠陥があります。意味的に要素を正しく使用することは悲しいことに過小評価されていますが、検索エンジンのランキングでフォームに優先順位を付ける利点がわかります。したがって、まず、コンテンツが段落でない場合は、pタグを使用しないでください。代わりにspanを使用してください。次に、img-tagはコンテンツのみを対象としています。非常に特殊なケースでは、このルールを無視する必要があるかもしれませんが、これはそれらの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;
}

「display：inline-block;」美しいものです。これで多くのことができ、レスポンシブデザインで非常にうまく機能します。 ただしクライアントによって異なります。インラインブロックはIE6、IE7ではうまく機能せず、IE8でも問題を引き起こします。私は個人的にIE6と7をサポートしていませんが、IE8はまだ世に出ています。クライアントがIE8で使用できるWebサイトを本当に必要としている場合、残念ながらインラインブロックは選択肢になりません。これを最初に評価してください。アイコン要素の黒い背景をスプライトに置き換え、配置し、そこにリピートを投げて、それであなたはそれを持っています。そうそう、プラスとして、縦方向に揃えてテキストを好きなように揃えることができます。

追伸：そこに空の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;
}

私はこれが嫌いです。テキストに固定の行の高さが使用され、アイコンのボックスと同じ高さを選択すると、テキストはその高さに中央揃えされます。テキストを上に揃えるには、行の高さを切り取り、下については、絶対位置とコンテナの固定幅と高さで固定する必要があります。誰かがそれを要求しない限り、私はそれに入るつもりはありません。それはそれ自体が問題であり、多くの不利な点をもたらすからです。このパスの主な欠点は、高さが固定されていることです。固定の高さは常に柔軟性がなく、特にテキストの場合、多くの問題が発生する可能性があります（ユーザーが切り取られない限り、ユーザーがテキストを拡大縮小することはできません。そのため、ブラウザではテキストが途切れず、行の高さの内側にゆらぎがあることを確認してください。追伸：コンテナのクリアフィックスを忘れないでください。そして、もちろん、黒い背景をスプライトとそれに応じた位置+繰り返しなしに置き換えます。

結論

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

12
Merritt6616