0

我正在尝试在top - center我的网页上显示一条消息。我创建了一个非常基本的示例：

http://jsbin.com/eniwax/3/edit

这里的问题在于消息容器。我想将容器宽度设置为等于消息文本宽度的意思（自动，宽度根据消息的大小而变化）。

4

3 回答 3

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>
于 2012-10-30T09:04:58.967 回答
1

在您的 div 中使用 a<span />而不是单独使用 a <div />。

Div 是块级元素，这意味着它们填充了它们拥有的所有可用宽度。跨度是内联的，这意味着它们的宽度与其内容一样宽。

于 2012-10-30T09:03:57.570 回答
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;

}

演示：http: //jsbin.com/eniwax/15

于 2012-10-30T09:06:43.937 回答