我正在尝试将我的轮播标题放在顶部，但它不起作用答案

【问题标题】：I'm trying to position my carousel caption on top but it's not working我正在尝试将我的轮播标题放在顶部，但它不起作用
【发布时间】：2016-06-06 21:10:33
【问题描述】：

我正在尝试将我的轮播标题放在顶部，但它不起作用，我还希望背景具有 100% 的宽度（我希望它填满它所在位置的整行，我不想要它被限制为文本宽度大小）

这是我的 html 代码

<div class="carousel-caption">
<h4><span class="caption-style"> Caption goes here</span></h4> 
</div>

这是我的 CSS 样式

.caption-style {
    color:   white !important;
    background: rgba(0, 0, 0, 0.5);
    display:block;
    padding-top: 15px;
    padding-bottom: 15px;
    top: 0;
    bottom: auto;
    width:100%;
}

【问题讨论】：

标签： html css twitter-bootstrap carousel caption

【解决方案1】：

对于轮播标题顶部，

您可以通过使用 margin-top 来使用您的最大尺寸

.carousel-caption {
    margin-top: -2em;
}

或者你可以使用

.carousel-caption {
        top: 0;
    }

【讨论】：

【解决方案2】：

只需设置.carousel-caption 的样式即可。要在顶部使用文本

.carousel-caption {
    top: 0;
    bottom: auto;
}

<div class="carousel-caption">
    <h4>Caption goes here</h4> 
</div>

您的h4 应该覆盖父级的整个宽度，还是您正在寻找某种特定行为？

【讨论】：

我希望背景覆盖父级的宽度，并且文本要在背景中居中
top: 0 没用？那很奇怪。无论如何，我很高兴你的问题得到了解答，祝你的项目好运。
很高兴知道。下次我拉头发的时候，我还有别的东西可以尝试:)