Question

我正在使用bootstrap 3来显示主图像旁边的图像边。

我想要做的是在中心图像下面添加文字。

现在，它不会低于预期的图像（中心） - 而是添加到下一张图像的上方，如下所示：

我尝试使用垂直对齐，清除和浮动无效。

 <style> .item img {
   max-width: 100%;
 }
 .item img:first-child,
 .item img:last-child {
   display: none;
 }
 /* Small devices (tablets, 768px and up) */
 @media (min-width: 768px) {
   .item img {
     float: left;
     width: 600px;
   }
   .item img:first-child,
   .item img:last-child {
     display: block;
   }
   .item.active {
     overflow: hidden;
     margin: 0 -546px;
   }
 }
 /* Medium devices (desktops, 992px and up) */
 @media (min-width: 992px) {
   .item img {
     width: 600px;
   }
   .item.active {
     margin: 0 -434px;
   }
 }
 /* Large devices (large desktops, 1200px and up) */
 @media (min-width: 1200px) {
   .item img {
     width: 600px;
   }
   .item.active {
     margin: 0 -330px;
   }
   </style>

<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet" />


<div class="container">

  <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
    <ol class="carousel-indicators">
      <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
      <li class="" data-target="#carousel-example-generic" data-slide-to="1"></li>
      <li class="" data-target="#carousel-example-generic" data-slide-to="2"></li>
    </ol>
    <div class="carousel-inner" role="listbox">
      <div class="item active">


        <img src="http://dummyimage.com/600x400/000/fff" alt="" />
        <p style="vertical-align:bottom">asdasdasdas</p>


        <img src="http://dummyimage.com/600x400/ff0/fff" alt="" />



        <img src="http://dummyimage.com/600x400/00ff00/fff" alt="" />

      </div>
      <div class="item">

        <img src="http://dummyimage.com/600x400/ff0/fff" alt="" />
        <p style="overflow:visible">asdasdasdas</p>
        <img src="http://dummyimage.com/600x400/00ff00/fff" alt="" />

        <img src="http://dummyimage.com/600x400/0000ff/fff" alt="" />
      </div>
      <div class="item">

        <img src="http://dummyimage.com/600x400/00ff00/fff" alt="" />
        <p style="overflow:visible">asdasdasdas</p>
        <img src="http://dummyimage.com/600x400/0000ff/fff" alt="" />
        <img src="http://dummyimage.com/600x400/000/fff" alt="" />
      </div>
      <div class="item">

        <img src="http://dummyimage.com/600x400/0000ff/fff" alt="" />
        <p style="overflow:visible">asdasdasdas</p>
        <img src="http://dummyimage.com/600x400/000/fff" alt="" />
        <img src="http://dummyimage.com/600x400/ff0/fff" alt="" />
      </div>
    </div>
    <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
      <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
      <span class="sr-only">Previous</span>
    </a>
    <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
      <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
      <span class="sr-only">Next</span>
    </a>
  </div>

</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>

Answer 1

将文本放在div的底部，然后使用CSS将其居中。如果您希望将其对齐到中心图像下方的一侧，您也可以给文本左右填充而不是居中。

<div class="item">
  <img src="http://dummyimage.com/600x400/0000ff/fff" alt="" />
  <img src="http://dummyimage.com/600x400/000/fff" alt="" />
  <img src="http://dummyimage.com/600x400/ff0/fff" alt="" />
  <p class="words">Testing the words out.</p>
</div>

<style>
   .words{
      text-align:center;
   }
</style>

OR

<style>
   .words{
      padding-LEFT:WIDTH_OF_LEFT_IMAGE;
      padding-right:WIDTH_OF_RIGHT_IMAGE;
   }
</style>

Answer 2

最适合您的方法是将每个img打包在div中并使用float: left。

但是如果你的文字不大，你可以把它放在img之后，用div.text-center换一下。

检查下面的第一张幻灯片：

＆＃13;

 <style> .item img {
   max-width: 100%;
 }
 .item img:first-child,
 .item img:last-child {
   display: none;
 }
 /* Small devices (tablets, 768px and up) */
 @media (min-width: 768px) {
   .item img {
     float: left;
     width: 600px;
   }
   .item img:first-child,
   .item img:last-child {
     display: block;
   }
   .item.active {
     overflow: hidden;
     margin: 0 -546px;
   }
 }
 /* Medium devices (desktops, 992px and up) */
 @media (min-width: 992px) {
   .item img {
     width: 600px;
   }
   .item.active {
     margin: 0 -434px;
   }
 }
 /* Large devices (large desktops, 1200px and up) */
 @media (min-width: 1200px) {
   .item img {
     width: 600px;
   }
   .item.active {
     margin: 0 -330px;
   }
   </style>

＆＃13;

<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet" />


<div class="container">

  <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
    <ol class="carousel-indicators">
      <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
      <li class="" data-target="#carousel-example-generic" data-slide-to="1"></li>
      <li class="" data-target="#carousel-example-generic" data-slide-to="2"></li>
    </ol>
    <div class="carousel-inner" role="listbox">
      <div class="item active">


        <img src="http://dummyimage.com/600x400/000/fff" alt="" />


        <img src="http://dummyimage.com/600x400/ff0/fff" alt="" />

        <img src="http://dummyimage.com/600x400/00ff00/fff" alt="" />

        <div class="text-center">
            <p style="vertical-align:bottom">asdasdasdas</p>
        </div>

      </div>
      <div class="item">

        <img src="http://dummyimage.com/600x400/ff0/fff" alt="" />
        <p style="overflow:visible">asdasdasdas</p>
        <img src="http://dummyimage.com/600x400/00ff00/fff" alt="" />

        <img src="http://dummyimage.com/600x400/0000ff/fff" alt="" />
      </div>
      <div class="item">

        <img src="http://dummyimage.com/600x400/00ff00/fff" alt="" />
        <p style="overflow:visible">asdasdasdas</p>
        <img src="http://dummyimage.com/600x400/0000ff/fff" alt="" />
        <img src="http://dummyimage.com/600x400/000/fff" alt="" />
      </div>
      <div class="item">

        <img src="http://dummyimage.com/600x400/0000ff/fff" alt="" />
        <p style="overflow:visible">asdasdasdas</p>
        <img src="http://dummyimage.com/600x400/000/fff" alt="" />
        <img src="http://dummyimage.com/600x400/ff0/fff" alt="" />
      </div>
    </div>
    <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
      <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
      <span class="sr-only">Previous</span>
    </a>
    <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
      <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
      <span class="sr-only">Next</span>
    </a>
  </div>

</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>

＆＃13;

Bootstrap - 附近的图像滑块|在下面添加文字

2 个答案: