引导轮播活动项目内的文本与文本和外部文本对齐答案

【问题标题】：Text inside bootstrap carousel active item aligned with and outside text引导轮播活动项目内的文本与文本和外部文本对齐
【发布时间】：2015-02-15 19:29:16
【问题描述】：

我有这个代码：

<section class="container">
    Logo
</section>

<section class="col-xs-12">
    <div id="myCarousel" class="carousel slide">
        <div class="carousel-inner">
            <div class="active item">
                <img src="http://placehold.it/1500x400/888&text=Item 1" />
                <div class="container">My intro</div>
            </div>        
        </div>
    </div>
</section>

这是一个引导轮播，只有一个项目。该项目是图片，图片上方是文字。这里是jsfiddle code，这里是jsfiddle live example。

问题是我想将My intro 文本放在图片上（顶部留有10px 的边距），同时与Logo 文本对齐。我该怎么做？

【问题讨论】：

您是否尝试将My intro 放入容器类？
是的，但不会超过图片。它会在它下面。
是的，这会将其对齐为徽标。您必须添加自定义 CSS 才能使其位于顶部。 Something like this
我在上一条评论中添加了一个小提琴。

标签： html css twitter-bootstrap twitter-bootstrap-3 carousel

【解决方案1】：

解决了！

使两个文本都像这样jsfiddle

html

<div id="logo">Logo</div>
<section class="col-xs-12" class="slider">
    <div id="myCarousel" class="carousel slide">
        <div class="carousel-inner">
            <div class="active item">
                <img src="http://placehold.it/1500x400/888&text=Item 1" />
                <div class="myintro">My intro</div>
            </div>
        </div>
    </div>
</section>

css

 .slider {
    position:relative;
}
.myintro {
    position:absolute;
    bottom:10px;
    left:10px;
    z-index:100;
}
#logo {
    margin-left:10px;
}

【讨论】：

没有。这样不好。您从 Logo 中删除了容器类，这就是重点，将其与具有类容器的部分对齐。

【解决方案2】：

正如anpsmn 在评论中发布的那样，似乎这个答案是正确的，这里是：

HTML：

<section class="container">
    Logo
</section>

<section class="col-xs-12">
  <div id="myCarousel" class="carousel slide">
      <div class="carousel-inner">
          <div class="active item">
              <img src="http://placehold.it/1500x400/888&text=Item 1" />
              <div class="container test-over"><h2>My intro</h2></div>
          </div>        
      </div>
  </div>
</section>

CSS：

.test-over h2 {position: absolute; top: 10px;}

Jsfiddle here

【讨论】：