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>

如果您能告诉我如何做到最佳实践，那将是很好的。

- Lukas Šalkauskas

---

哈曼的回答是可行的，但是你在编造自己的HTML标签吗？ - Sebastian Patane Masuelli

Answer 1

将text-align: center;设置为水平居中，将line-height: [heightofbox];设置为垂直居中。

这里有一个简单的示例。

---

请注意，如果您正在使用无效的HTML元素，则需要将它们设置为块级元素。因此，这应该解决问题：

customEl {
  display: block;
  ...
}

- Harmen

---

@harmeen，我打字和格式化都比较慢... :) 我的答案也应该是正确的。 - kobe

在水平方向上不对齐（至少在FF 3.6中不行）-他已经在其中加入了text-align:center;... - J V

最初我没有对我的div代码进行格式化，所以输出结果为1，因此我不得不再次进行编辑。 - kobe

当然，这取决于它们是否默认为块级元素或内联元素。由于OP示例中的元素不是标准HTML元素，因此这是在瞎猜。 - BalusC

@J V，height他应该指定图像的高度。 - kobe

Answer 2

可能更现代的答案？

1. 创建一个 div 元素。
2. 在 div 元素中添加文本。

然后使用 flexbox 样式对 div 进行以下设置：

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

如果需要更加动态的定位，可以将背景图片容器设置为：

background-image: url(图片地址);

  positiion: relative;

并且将您的文本框div包含在内。

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

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

- Theorder

Answer 3

suggestion_active_text {
    text-align: center;
    height: 100%;
    display: flex;
    place-content: center;
    align-items: center;
}

- matpvl

---

谢谢您的回答。为了使其更有帮助，您能否在其中包含一些解释呢？因为这样的回答通常比仅包含代码的回答更有帮助。 - shaedrich

Answer 4

您可以删除 suggestion_active_text..

有一个带背景图片的 div。在该 div 内部执行以下操作

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

为上面提供背景图片，就这样。

- kobe

---

@Lukas，文本居中对齐适用于文本，现在您可以为此单个div设置背景图像...因此不需要两个。 - kobe

Answer 5

将以下内容添加到您的标签中，它应该就可以解决问题了：

display: block;
width:100px;

- J V

---

嗯...我实际上正在这里测试，也就是说，真正的HTML文件。到目前为止，结合OPs代码，这是唯一有效的...所以，是的，真的... - J V

不完全是这样。在所有浏览器中，vertical-align 都不能正常工作。由于这只涉及文本，设置 line-height 更加优雅。 - Harmen

我在这里谈论水平居中，如果没有块和宽度，它就无法水平居中。当时我甚至没有考虑垂直方向，但是是的，应该使用行高。实际上，他可以在单个元素中完成整个事情。 - J V

Answer 6

我认为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;
}

- Sebastian Devassy