Html 背景图像中心的 CSS 文本
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4240015/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS text in center of background image
提问by Lukas ?alkauskas
how can I center text on following (Sorry I'm new to CSS):
如何将文本集中在以下内容上（对不起，我是 CSS 新手）：
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:
html：
<suggestion_active><suggestion_active_text>1</suggestion_active_text></suggestion_active>
Also it would be nice if you tell me the best practices of how to do this :)
如果你告诉我如何做到这一点的最佳实践，那也很好:)
回答by Harmen
Set text-align: center;to center the text horizontally, and set line-height: [heightofbox];to center the text vertically.
设置text-align: center;为水平居中文本，并设置line-height: [heightofbox];为垂直居中文本。
Here is a simple exampleof that
下面是一个简单的例子那
Note that, if you are working with invalid HTML elements, you need to set them as block elements. So, this should do the trick:
请注意，如果您正在处理无效的 HTML 元素，则需要将它们设置为块元素。所以，这应该可以解决问题：
customEl {
display: block;
...
}
回答by Aquasar
Bit more modern answer maybe?
也许更现代的答案？
- Create a div
- Place text inside the div
- 创建一个div
- 将文本放在 div 中
Then using flexbox style div as follows:
然后使用 flexbox 样式的 div 如下：
display: flex;
flex-direction: column;
height: 100%;
width: 100%;
justify-content: center;
align-items: center;
ALTERNATIVELY for more dynamic positioning
或者更动态的定位
set your background image div to
将您的背景图像 div 设置为
positiion: relative;
AND your text box div to include
和您的文本框 div 包括
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
- This allows you to move text for instance 20% from the top instead of 50%.
- translate(-50%,-50%) realigns the anchor of the text div to be in the center, which will be noticeable if you have longer text.
- 这允许您将文本从顶部移动 20% 而不是 50%。
- translate(-50%,-50%) 将文本 div 的锚点重新对齐到中心，如果你有更长的文本，这会很明显。
回答by Sebastian Devassy
I think Flex works better, you can make it aligned to center in both directions.
我认为 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;
}
回答by kobe
You can remove suggestion_active_text..
你可以删除suggest_active_text..
Have one div with background image. inside that div do like this
有一个带有背景图像的 div。在那个div里面做这样的
<div style="text-align:center"> 1 </div>
give background image for above thats it
给上面的背景图片就是这样
回答by J V
Add the following to both of your tags and it should do the trick:
将以下内容添加到您的两个标签中，它应该可以解决问题：
display: block;
width:100px;
