0

top - centerWeb ページにメッセージを表示しようとしています。私は非常に基本的な例を作成します:

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

Use a <span /> inside your div rather than a <div /> on it's own.

Divs are block level elements which means they fill all the available width that they have. Spans are inline which means they are only as wide as their contents.

于 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 に答える