0

我做了一个块，它包含两种不同类型的文本，一个代表必须出现在块右上角的标志，而另一个跨度文本是数字，必须显示在 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 回答
1

我创建了一个函数来执行你正在寻找的东西（我认为）。我相信它在大多数情况下（如果不是所有情况）都对你有用……多行，等等……

我还必须更新你的一些样式来完成它，但这里有一个WORKING FIDDLE。

这是功能：

function positionText() {
    $('.cardPile2').each(function (i, ele) {
        var width = $(this).outerWidth();
        $(this).css({height: width + 'px'});

        // scale font sizes
        var charFontScale = 16/86;
        var scrFontScale = 13/86;
        var charFontSize = Math.round(width * charFontScale);
        var scrFontSize = Math.round(width * scrFontScale);

        // top right align the characters
        var chr = $(this).find('.TileCharacter').css({'font-size': charFontSize + 'px'});
        var chrWidth = $(chr).outerWidth();
        var chrHeight = $(chr).outerHeight();
        $(chr).css({top: Math.floor(width/2 - chrHeight/2) + 'px', left: Math.floor(width/2 - chrWidth/2) + 'px'});

        // center the scores
        var score = $(this).find('.TileScore').css({'font-size': scrFontSize + 'px'});
        var scrWidth = $(score).outerWidth();
        $(score).css({left: (width - scrWidth) + 'px'});
    });
}

让我知道这是否可以为您完成工作。

编辑

我已经更新了小提琴以按比例缩放字体。编辑功能如上。

于 2013-09-11T13:50:54.223 回答
0

将行高 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 回答
0

为了使其响应，我给出了paddingin % 。这可能是你想要的。 http://jsfiddle.net/E2vbe/15/ 并且font-size可以使用媒体查询而不是JS来更改不同的屏幕分辨率。

于 2013-09-11T14:06:25.637 回答