0

2 つの異なるタイプのテキストを含むブロックを作成しました。1 つはブロックの右上に表示する必要がある記号を表し、もう 1 つは div の中央に表示する必要がある数値です。

問題は、私が何をしても、そのdivの真ん中にテキスト番号の位置を設定できないことです。第二に、ボックスとは異なる解像度で使用すると同じテキストが正常に機能し、JS コードを使用して自動的にサイズ変更して幅と高さを調整しますが、フォントは常に同じサイズのままです。フォントサイズにパーセンテージを使用すると、解像度が大きくなるとサイズが大きくなると考えましたが、機能しませんでした。この html を携帯電話で使用する必要があり、携帯電話ごとに解像度が異なり、解像度のサイズに基づいてこのブロックを縮小または拡大する必要がありますが、フォントはまったく調整されません。私はcssとhtml5の初心者のようなもので、この目標を達成するのに親切に助けてくれます.

ここに私のコードのフィドルプレビューがあります http://jsfiddle.net/E2vbe/

ここに私のコードがあります

$(function() {
    var pilewidth2 = $('#A').width();
    $('#A').height(pilewidth2);
    $('#B').height(pilewidth2);
}); //this make my div with same height and width on any resolution

<div id="A" style="vertical-align:middle;" class="cardPile2">
    <span class="TileScore">$</span>
    <span class="TileCharacter">44</span>
</div>
<div id="B" class="cardPile2">
    <span class="TileScore">%</span>
    <span class="TileCharacter">33</span>
</div>

私のCSS

.cardPile2 {
    margin: 0 auto;
    background: #ffd;
    float: left;
    width: 9%;
    padding-bottom: 0;
    border: 1px solid #333;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    margin: 0 0 0 5px;
    background: #666;
    color: #fff;
    opacity:0.9;
    text-align:center;
    vertical-align:middle;
}

.TileScore
{
    float:right;font-size:small;padding-right:10px;
}

.TileCharacter
{
    color:yellow;
}
4

4 に答える 4

1

このワーキングフィドルをチェックしてください

私の解決策は、行の高さを修正しなくても機能します（複数行の場合やフォントサイズが異なる場合は、修正しない方がよいでしょう）

テスト済み: IE10、IE9、FF、Chrome

マークアップを変更せずに: これをCSSに追加します

.TileCharacter
{
    color:yellow; /*From your CSS*/
    display: inline-block;
    text-align:center;
    width: 100%;
}
.TileCharacter:before
{
    content: '';
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}

また、ルールからtext-align:center;&を削除することもできます。vertical-align:middle;.cardPile2

于 2013-09-11T13:26:12.263 に答える
0

このようなスパンに line-height css プロパティを適用します

.TileScore
{
    float:right;font-size:small;padding-right:10px;
    line-height:4;
}

.TileCharacter
{
    line-height:4;
    color:yellow;
}
于 2013-09-11T13:29:07.727 に答える