2

私は最小限のcss要素でcssで次のアライメントを達成しようとしています：

真ん中：

==============================================================
= [icon]                                                     =
= [    ] Text                                                =
= [    ]                                                     =
==============================================================

下：

==============================================================
= [icon]                                                     =
= [    ]                                                     =
= [    ] Text                                                =
==============================================================

右中：

==============================================================
=                                                     [    ] =
=  Text                                               [    ] =
=                                                     [    ] =
==============================================================

右下：

==============================================================
=                                                     [    ] =
=                                                     [    ] =
=  Text                                               [    ] =
==============================================================

ミドルは本当に簡単です：

テキストの行の高さ=10px、アイコンの高さ=30pxと仮定します

<div class="container">
    Text
</div>

<div class="container right">
    Text
</div>

.container {
    line-height: 30px;
    background: url(...) no-repeat center left
    padding-left: 38px;
}
.container.right {
    line-height: 30px;
    background: url(...) no-repeat center right
    padding-right: 38px;
}

問題は、下の位置合わせをどのように行うかです。

4

2 に答える 2

4

親要素から要素を垂直方向に整列させる唯一の方法は、とを使用してテーブルセルとして表示するように要素を設定することdisplay:table-cell;ですvertical-align:。それが受け入れられない場合は、子要素と相対的な配置から行う必要があります。

http://jsfiddle.net/VdvmJ

于 2012-08-01T20:14:10.777 に答える
1

大したことではないと思います。最初に背景画像の位置を左上に設定してから、画像の高さに応じて線の高さを増やします。

このjsfiddleの例を確認してください

セクションを右揃えにするために、私text-align:right;も設定しました。

あなたがこれをやろうとしていることを願っています。

于 2012-08-01T16:50:12.267 に答える