写在bootstrap顶部面板线上？

Question

我想使用这样的bootstrap来实现：

如果你看到Top Hit，Artists和Genres的话，我希望我能把它放在这样一个面板的顶线：

我想把文字放在＆＃34; Top Hit＆＃34;在面板的顶部。

谢谢，无法解决这个问题并希望你们知道： - ）

Answer 1

你必须利用负余量来实现这一目标。

假设你有HTML：

<div>

    <h1>Artists</h1>

</div>

然后你需要CSS作为：

div{
    height:100px;
    width:100px;
    border:2px solid black;
    margin-top:10px;
    text-align: center;
}

h1{
    width:50px;
    margin-top:-10px;
    margin-left:auto;
    margin-right: auto;
    background:white;
}

说明： 在div内，将文字对齐在中心。将margin-top h1的负值放在border-line div的顶部。现在将一些width和margin-left以及margin-right设为auto，这将使标题居中。

请参阅小提琴：“http://jsfiddle.net/kboutd9q/1/”

将屏幕截图视为：

Answer 2

您可以尝试这样 -

＆＃13;

＆＃13;

*{margin:0;padding:0;}
            
div {
    border: 2px solid #ccc;
    height: 200px;
    margin: 10px auto;
    position: relative;
    width: 300px;
}

h3 {
    background: #fff none repeat scroll 0 0;
    height: auto;
    left: 20px;
    padding: 3px 5px;
    position: absolute;
    top: -15px;
}

＆＃13;

<div>
     <h3>Test</h3>
</div>

＆＃13;

＆＃13;

＆＃13;