Question

我有这段代码：

<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文本对齐。我怎么能这样做？

Answer 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;
}

Answer 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

在bootstrap轮播活动项目内的文本与文本对齐和在文本之外

2 个答案:

解决了它！