CSS文本在背景图像的中心

Question

我怎样才能将文字放在下面（对不起我是CSS的新手）：

CSS：

suggestion_active { 
    background-image: url(../images/suggestion_active.jpg);
    background-repeat:no-repeat;
    position:inherit;
    float:inherit;
    width: 100px; 
    height: 36px;
}

suggestion_active_text {
    possition: absolute;
    font-family: "Lucida Grande", Tahoma;
    font-size: 12px;
    font-weight: lighter;
    text-align: center;
    color:#000;
    vertical-align: middle;
    padding:0px;
}

HTML：

 <suggestion_active><suggestion_active_text>1</suggestion_active_text></suggestion_active>

如果你告诉我如何做到这一点的最佳实践，那也很好。）

Answer 1

设置text-align: center;以使文本水平居中，并设置line-height: [heightofbox];以使文本垂直居中。

这是

的简单example

---

请注意，如果您使用的是无效的HTML元素，则需要将它们设置为块元素。所以，这应该可以解决问题：

customEl {
  display: block;
  ...
}

Answer 2

您可以删除suggestion_active_text ..

有一个div与背景图像。 div里面就是这样的

<div style="text-align:center"> 1 </div>

为上面提供背景图片

Answer 3

将以下内容添加到两个标记中，它应该可以解决问题：

display: block;
width:100px;

Answer 4

也许有更现代的答案？

1. 创建div
2. 将文本放入div

然后使用flexbox样式div如下：

  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
  justify-content: center;
  align-items: center;

替代性地实现更动态的定位

将背景图像div设置为

  positiion: relative;

将您的文本框div包括在内

  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

• 这使您可以将文本例如从顶部移动20％，而不是 50％。
• translate（-50％，-50％）将文本div的锚点重新对齐到居中位置，如果文本较长，则会引起注意。

Answer 5

我认为Flex效果更好，您可以使其在两个方向上居中对齐。

suggestion_active { 
    background-image:url(https://placeimg.com/120/120/tech/sepia);
    background-repeat:no-repeat;
    width: 100px; 
    height: 36px;
    display: flex;
    justify-content: center; //horizontal alignment
    align-items: center; //vertical alignment
}

suggestion_active_text {
    possition: absolute;
    font-family: "Lucida Grande", Tahoma;
    font-size: 12px;
    font-weight: lighter;
    text-align: center;
    color:#000;
    vertical-align: middle;
    padding:0px;
}

Answer 6

http://some.host