在背景图象的中心文本

Question

我正在努力将文字放在背景图像的垂直和水平中间。我的背景图片是徽章，应始终具有相同的尺寸，我的文字在顶部是一个带有1或2位数的数字。所有这些都是我的标题。

HTML：

<h1>
  <span class="playerlevel">
    <strong>12</strong>
  </span>
  player
  <span class="playertag"> #tag</span>
</h1>

CSS

.playerlevel strong {
  height: 28px;
  width: 28px;
  padding: 0;
  margin: 0;
  line-height: 28px;
  font-size: 18px;
  font-weight: normal;
  text-align: center;
  background-image: url(http://i.imgur.com/IuhiyzQ.png);
  color: #fff;
}

.playertag {
  font-size: 1rem;
}

结果如何：

我的代码创建的内容：

的jsfiddle：

https://jsfiddle.net/nafhLz1w/

Answer 1

只需添加'display：inline-block;'你的css。

Answer 2

我认为您错过了display:block;或display:inline-block属性。

添加它会使数字在您的背景图片上正确显示：https://jsfiddle.net/nafhLz1w/1/

旁注：不过我不建议将这一切包装在H1标签中，但这并不是一个好办法。而是将其包装在div或其他块元素中。

Answer 3

使用background-size作为封面和一些填充

下面的代码段

.playerlevel strong {
  height: 28px;
  width: 28px;
  padding: 0;
  margin: 0;
  line-height: 28px;
  font-size: 18px;
  font-weight: normal;
  text-align: center;
  background-image: url(http://i.imgur.com/IuhiyzQ.png);
  background-size:cover;
  padding:10px;
  color: #fff;
}

.playertag {
  font-size: 1rem;
}

<h1>
  <span class="playerlevel">
    <strong>12</strong>
  </span>
  player
  <span class="playertag"> #tag</span>
</h1>

Answer 4

您需要设置2个属性：val figures: List[List[Figure]] = List() def inRange(figures: List[List[Figure]]) = { val f = figures.flatMap(identity) f.map { case King => field.forEach(matrix) { if (matrix == true) { if (Math.abs(m1 - m2) <= 1 || Math.abs(n1 - n2) <= 1) matrix = false } } } } 和填充，例如background-size: cover;

JsFiddle：https://jsfiddle.net/hwkkr877/

Answer 5

这肯定有用。

.playerlevel {
display: inline-block;
}

.playerlevel strong {
 background-image: url("http://i.imgur.com/IuhiyzQ.png");
 background-size: contain;
 color: #fff;
 display: inline-block;
 font-size: 14px;
 font-weight: normal;
 height: 28px;
 line-height: 28px;
 margin: 0;
 padding: 0;
 text-align: center;
 width: 28px;
}

Answer 6

$(function() {
    var searchBGDIV = $('#searchBG');
    var backgrounds = new Array(
        'url("https://wallpaperbrowse.com/media/images/background-18.jpg")',
        'url("https://wallpaperbrowse.com/media/images/background-1247931_960_720.jpg")',
        'url("https://wallpaperbrowse.com/media/images/background-pictures-2.jpg")',
        'url("https://wallpaperbrowse.com/media/images/background-wallpapers-26.jpg")'
        );

    var current = 0;

    function nextBackground() {
        searchBGDIV.css('background',
        backgrounds[current = ++current % backgrounds.length]
        );
        searchBGDIV.css("background-position", "center center");
        searchBGDIV.css("min-height", "400px");
        setTimeout(nextBackground, 5000);
    }

    setTimeout(nextBackground, 5000);
    searchBGDIV.css('background', backgrounds[0]);
    searchBGDIV.css("min-height", "400px");
    searchBGDIV.css("background-position", "center center");
});