我正在尝试在我的网页top - center上显示一条消息。我创建了一个非常基本的例子：
http://jsbin.com/eniwax/3/edit
这里的问题是带有消息容器。我想将容器宽度设置为等于消息文本宽度的意思（自动，宽度根据消息的大小而变化）。
答案 0 :(得分：2)
这样做DEMO
说明：使用嵌套div并将容器div宽度设为100％并将text-align: center;赋予容器div
CSS
.test {
top: 0;
text-align: center;
position: relative;
width:auto;
z-index: 100;
border: 1px solid #F0C36D;
background-color: #F9EDBE;
font-size: 12px;
font-weight: bolder;
padding : 4px;
display: inline-block;
}
.container {
width: 100%;
text-align: center;
}
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
<div class="container">
<div class="test">I am a sample text</div>
</div>
</body>
</html>
答案 1 :(得分：1)
在你的div中使用<span />，而不是<div />。{/ p>
Div是块级元素，这意味着它们填充了它们拥有的所有可用宽度。跨度是内联的，这意味着它们只有它们的内容一样宽。
答案 2 :(得分：0)
display: inline-block;和text-align: center;提供给父级。body {text-align: center;}
.test
{
top: 0;
text-align: center;
position: relative;
width:auto;
display: inline-block;
z-index: 100;
border: 1px solid #F0C36D;
background-color: #F9EDBE;
font-size: 12px;
font-weight: bolder;
padding : 4px;
}