如何将具有有限宽度和绝对位置的背景颜色的文本居中答案

【问题标题】：how to center my text that has background-color of limited width and absolute position如何将具有有限宽度和绝对位置的背景颜色的文本居中
【发布时间】：2013-05-23 20:49:24
【问题描述】：

也许我正在努力，但我想做的是将帖子标题放在我页面上的特色图片上方。我通过放置文本来让它工作，但这当然会阻止我的页面成为响应式页面。我正在寻找的是具有一定宽度的背景颜色（因此不会从左到右传播）的文本自动居中并处于绝对位置。这可能吗？

这是我到目前为止所拥有的：

<style>
.post_title 
{
font-family: sans-serif; 
font-size: 14px; 
color: #fff; 
text-align:center;
position: absolute;
background-color: #0E0EFF; 
display:table; 
margin:auto; 
width: 40%; 
padding: 3px; 
border-radius: 2px;
} 
</style>

任何帮助将不胜感激，我已经寻找了几个小时的答案。

谢谢！

【问题讨论】：

“我正在寻找的是具有一定宽度的背景颜色的文本（所以不要从左到右传播）”这是违反自然的。

标签： css positioning background-color css-position centering

【解决方案1】：

我不确定我是否正确理解了您的问题，但您可以尝试在 .post_title 周围加上一个包装器，比如说div class="titlewrapper"

应用类似这样的样式：

div.titlewrapper {
    width:100%;
    text-align:center;
}

div.titlewrapper .post_title {
    font-family: sans-serif; 
    font-size: 14px; 
    color: #fff; 
    width:auto;        
    background-color: #0E0EFF; 
    display:inline-block; 
    margin:auto; 
    padding: 3px; 
    border-radius: 2px;
}

这能回答你的问题吗？

格罗特，杰伦

【讨论】：

【解决方案2】：

THIS 可以为你工作吗？

CSS：

.center_title {
    margin-left:auto;
    margin-right:auto;
}
.post_title {
    font-family: sans-serif;
    font-size: 14px;
    color: #fff;
    text-align:center;
    background-color: #0E0EFF;
    display:table;
    margin:auto;
    width: 40%;
    padding: 3px;
    border-radius: 2px;
}

HTML

<div class="center_title">
    <div class="post_title">test</div>
</div>

尽量不要使用职位，只有当你真的需要时！

【讨论】：

非常感谢您的回复。这与我需要的非常接近。但问题是文本仍然在我的特征图像后面的一半，而我需要它在它的前面。这就是我使用职位的原因：绝对。有什么解决办法吗？