2

私は次のHTMLを持っています：

<p style="line-height: 20px; margin-bottom: 10px;"> </p>
<div class="icon sprite-book-open" style="margin-right: 5px"></div>
Topic: No Topic Title
<p></p>

私のCSSは次のようなものです。

.icon {
    background-color: transparent;
    background-image: url(/Images/fugue/sprite.png);
    background-repeat: no-repeat;
    display: inline-block;
    height: 16px;
    line-height: 16px;
    width: 16px;
}
.sprite-book-open{ background-position: 0 -288px;  }

段落なしでこれを行うことができ、画像アイコンがテキストと一致する方法はありますか？現在、アイコンは数ピクセル高すぎます。これを線の中央に配置する方法が必要だと思いますが、これを行う方法がわかりません

4

4 に答える 4

0

あなたが何をしようとしているのか理解できませんが、段落の前にアイコンを配置したい場合は、左と背景のパディングを使用するのが最善の方法です。

<style>
.paragraph-with-icon {
    background:url(http://www.pangoo.it/img/pangoo.gif) no-repeat;
    padding:0 0 0 120px;
    line-height: 53px;
}
</style>


<p class="paragraph-with-icon">
Topic: No Topic Title
</p>

この例では、100x53ピクセルのアイコンを使用しました（120ピクセルは100ピクセル+ 20の間隔です）。

ここで試すことができます：http：//jsfiddle.net/apFvw/1/

画像の上部に揃えたい場合は、次のように変更します。

line-height: 53px;

と

height: 53px;

また

min-height: 53px;

（そして、min-heightをサポートしていないブラウザのためのソリューションがあります）

同じ段落の余白を使用して、divや余分なマークアップを追加せずに間隔を調整できます。

于 2012-11-28T09:22:27.217 に答える
0

bottomアイコンの垂直方向の配置はどうですか。

vertical-align:bottom;

不要なマークアップをすべて削除したい場合は、次のことを検討してください。

HTML：

<div class="title sprite-book-open" style="margin-right: 5px">
Topic: No Topic Title
</div>

CSS：

.title{
    line-height: 16px;
}
.title:before {
    background-color: transparent;
    content: " ";
    background-image: url(/Images/fugue/sprite.png);
    background-repeat: no-repeat;
    display: inline-block;
    height: 16px;
    width: 16px;
    vertical-align:bottom;
}
.sprite-book-open:before{ 
    background-position: 0 -288px;  
}

これがデモンストレーションです：http：//jsfiddle.net/V4EM6/8/

于 2012-11-28T09:05:57.590 に答える
0

あなたはこのようにそれを行うことができます。

<div class="container">
    <div class="icon sprite-book-open" style="margin-right: 5px"></div>
    <div class="text">Topic: No Topic Title</div>
</div>

css

.text{float:left;margin-top:5px;}
.icon{float:left;margin-top:5px}

マージントップを調整して、それらを揃えることができるようになりました。margin-leftを使用して、アイコンとテキストの間にスペースを作成できます。

于 2012-11-28T09:06:56.470 に答える
0 
<style>
    .icon {
        line-height: 1.6em;
        padding: 0 0 0 40px;
        background: url('http://cdn1.iconfinder.com/data/icons/fatcow/32x32_0120/book_open.png') no-repeat 5px 50%
    }

</style>
<div class="icon sprite-book-open">
    <p>
        Topic: No Topic Title
    </p>
</div>

<style>
    .icon {
    display:inline-block;
    height:32px;
    width:32px;
    background: url('http://cdn1.iconfinder.com/data/icons/fatcow/32x32_0120/book_open.png') no-repeat center center }
    span {

    }
    p, span, .icon {vertical-align:middle}

</style>

<p>
    <div class="icon sprite-book-open"></div>
    <span>Topic: No Topic Title</span>
</p>
于 2012-11-28T09:09:00.493 に答える