如何在文本上堆叠图像？

时间：2015-11-02 20:08:43

标签： html css twitter-bootstrap

我试图在这些图像中水平和直接排列图像我想要应用文本，我该怎么做呢？

这是我在上一次尝试中尝试过的，到目前为止......没有运气！

我也在使用bootstrap并在ruby on rails应用程序中执行此样式，如果这有帮助的话。谢谢！

HTML 

<div class="our-story-pt-5">
  <div class="container">
    <h4>Our services include</h4>
    <div class="row">
      <ul>
        <li>
          <img class="img-responsive" src="img-1.jpg">
          <p>Creative and Technology Strategy</p>
        </li>
      </ul>
        <li>
          <img class="img-responsive" src="img-2.jpg">
          <p>Digital Product Development</p>
        </li>
        <li>
          <img class="img-responsive" src="img-3.jpg">
          <p>Technology Integration</p>
        </li>
        <li>
          <img class="img-responsive" src="img-4.jpg">
          <p>System Validation</p>
        </li>
        <li>
          <img class="img-responsive" src="img-5.jpg"><br>
          <p>Sustained Support and Enhancement</p>
        </li>
      </ul><!-- end ul -->
    </div><!-- end div.row -->
  </div><!-- end div.container -->
</div><!-- end div.our-story-pt-5 -->

CSS 

div.our-story-pt-5 ul{
  list-style: none;
  text-align: center;
  padding: 0px;
}

div.our-story-pt-5 li{
  list-style-type: none;
  color: #284179;
  text-align: left;
  line-height: 40px;
  font-size: 22px;
  display: inline;
  width: 20%;
  padding: 0px 5px;
  p{
    font-weight: 500;
    font-family: 'Gotham-Bold';
    line-height: 23px;
    font-size: 16px;
    margin-bottom: 0px;
    letter-spacing: 0px;
    color: #2c4d82;
  }
}

div.our-story-pt-5 img{
  margin-bottom: 12px;
}

.img-responsive{
  display: inline-block;
  height: auto;
  max-width: 100%;
}

3 个答案:

答案 0 :(得分：0)

这个怎么样？使用Bootstrap列类和几行CSS来使文本居中，我相信结果就是你要找的东西。当然，如果你真的希望最后两个框居中，你可以使用偏移类。但是你可以决定。

Bootply example

HTML：

<div class="our-story-pt-5">
  <div class="container">
    <h4>Our services include</h4>
    <div class="row">      
        <div class="col-xs-12 col-sm-6 col-md-4 col-lg-4 item-box">
          <img class="img-responsive" src="http://static.alipson.fr/m124/p97072/p1.jpg">
          <p>Creative and Technology Strategy</p>
        </div>      
        <div class="col-xs-12 col-sm-6 col-md-4 col-lg-4 item-box">
          <img class="img-responsive" src="http://dolceamaro.d.o.pic.centerblog.net/66vpjvnj.jpg">
          <p>Digital Product Development</p>
        </div>
        <div class="col-xs-12 col-sm-6 col-md-4 col-lg-4 item-box">
          <img class="img-responsive" src="http://static.alipson.fr/m124/p32420/p1.jpg">
          <p>Technology Integration</p>
        </div>
        <div class="col-xs-12 col-sm-6 col-md-4 col-lg-4 item-box">
          <img class="img-responsive" src="https://pbs.twimg.com/profile_images/432550536768802816/Ht4nqkAi_400x400.png">
          <p>System Validation</p>
        </div>
        <div class="col-xs-12 col-sm-6 col-md-4 col-lg-4 item-box">
          <img class="img-responsive" src="https://tonij.com/wp-content/uploads/sites/9/2014/08/derp-dragon-for-blog-400x400.jpg"><br>
          <p>Sustained Support and Enhancement</p>
        </div>      
    </div><!-- end div.row -->
  </div><!-- end div.container -->
</div><!-- end div.our-story-pt-5 -->

CSS：

.item-box{
    text-align:center;
    margin-bottom:25px;
}

div.our-story-pt-5 ul{
  list-style: none;
  text-align: center;
  padding: 0px;
}

div.our-story-pt-5 li{
  list-style-type: none;
  color: #284179;
  text-align: left;
  line-height: 40px;
  font-size: 22px;
  display: inline;
  width: 20%;
  padding: 0px 5px;
  p{
    font-weight: 500;
    font-family: 'Gotham-Bold';
    line-height: 23px;
    font-size: 16px;
    margin-bottom: 0px;
    letter-spacing: 0px;
    color: #2c4d82;
  }
}

div.our-story-pt-5 img{
  margin-bottom: 12px;
}

.img-responsive{
  display: inline-block;
  height: auto;
  max-width: 100%;
}

答案 1 :(得分：0)

根据您是否要使用网格，有几种方法可以执行此操作。如果没有，那么只需在li上使用display：inline-block，也可以给ul一个班级（虽然没必要）。

请参阅代码段中的示例。

.our-story-pt-5 ul.img-container li {
  display: inline-block;
}
.our-story-pt-5 ul.img-container img {
  margin-bottom: 12px;
}
.our-story-pt-5 ul.img-container {
  list-style: none;
  padding: 0px;
}
.our-story-pt-5 ul.img-container li {
  list-style-type: none;
  color: #284179;
  line-height: 40px;
  font-size: 22px;
  padding: 0px 5px;
  p {
    font-weight: 500;
    font-family: 'Gotham-Bold';
    line-height: 23px;
    font-size: 16px;
    margin-bottom: 0px;
    letter-spacing: 0px;
    color: #2c4d82;
  }
}
/**Grid**/

.our-story-pt-6 {
  color: #284179;
  line-height: 40px;
  font-size: 22px;
  padding: 0px 5px;
  p {
    font-weight: 500;
    font-family: 'Gotham-Bold';
    line-height: 23px;
    font-size: 16px;
    margin-bottom: 0px;
    letter-spacing: 0px;
    color: #2c4d82;
  }
}
.our-story-pt-6 img {
  margin: 0 auto;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="our-story-pt-5 text-center">
  <h3 class="well well-sm">List</h3>
  <div class="container-fluid">
    <h4>Our services include</h4>

    <ul class="img-container">
      <li>
        <img class="img-responsive" src="http://placehold.it/350x150">
        <p>Creative and Technology Strategy</p>
      </li>
      <li>
        <img class="img-responsive" src="http://placehold.it/350x150">
        <p>Digital Product Development</p>
      </li>
      <li>
        <img class="img-responsive" src="http://placehold.it/350x150">
        <p>Technology Integration</p>
      </li>
      <li>
        <img class="img-responsive" src="http://placehold.it/350x150">
        <p>System Validation</p>
      </li>
      <li>
        <img class="img-responsive" src="http://placehold.it/350x150">
        <p>Sustained Support and Enhancement</p>
      </li>
    </ul>
  </div>
</div>
<hr>
<div class="our-story-pt-6 text-center">
  <h3 class="well well-sm">Grid 1</h3>
  <div class="container-fluid">
    <h4>Our services include</h4>

    <div class="row">
      <div class="col-sm-2 col-sm-offset-1">
        <img class="img-responsive" src="http://placehold.it/350x150">
        <p>Creative and Technology Strategy</p>
      </div>
      <div class="col-sm-2">
        <img class="img-responsive" src="http://placehold.it/350x150">
        <p>Digital Product Development</p>
      </div>
      <div class="col-sm-2">
        <img class="img-responsive" src="http://placehold.it/350x150">
        <p>Technology Integration</p>
      </div>
      <div class="col-sm-2">
        <img class="img-responsive" src="http://placehold.it/350x150">
        <p>System Validation</p>
      </div>
      <div class="col-sm-2">
        <img class="img-responsive" src="http://placehold.it/350x150">
        <p>Sustained Support and Enhancement</p>
      </div>
    </div>
  </div>
</div>
<hr>
<div class="our-story-pt-6 text-center">
  <h3 class="well well-sm">Grid 2</h3>
  <div class="container-fluid">
    <h4>Our services include</h4>

    <div class="row">
      <div class="col-sm-4">
        <img class="img-responsive" src="http://placehold.it/350x150">
        <p>Creative and Technology Strategy</p>
      </div>
      <div class="col-sm-4">
        <img class="img-responsive" src="http://placehold.it/350x150">
        <p>Digital Product Development</p>
      </div>
      <div class="col-sm-4">
        <img class="img-responsive" src="http://placehold.it/350x150">
        <p>Technology Integration</p>
      </div>
      <div class="clearfix visible-md-block visible-sm-block"></div>
      <div class="col-sm-4">
        <img class="img-responsive" src="http://placehold.it/350x150">
        <p>System Validation</p>
      </div>
      <div class="col-sm-4">
        <img class="img-responsive" src="http://placehold.it/350x150">
        <p>Sustained Support and Enhancement</p>
      </div>
    </div>
  </div>
</div>

答案 2 :(得分：0)

修改代码上的CSS :: 

        div.our-story-pt-5 ul{
          list-style: none;
          text-align: center;
          padding: 0px;
        }

        div.our-story-pt-5 li{
          list-style-type: none;
          color: #284179;
          text-align: center;
          line-height: 40px;
          font-size: 22px;
          display: inline;
          width: 19%;
          padding: 0px 5px;
          float: left;
        }
        p{
            font-weight: 500;
            font-family: 'Gotham-Bold';
            line-height: 23px;
            font-size: 16px;
            margin-bottom: 0px;
            letter-spacing: 0px;
            color: #2c4d82;
        }
        h4 {
          font-size: 30px;
          text-align: center;
        }
        div.our-story-pt-5 img{
          margin-bottom: 12px;
        }

        .img-responsive{
          display: inline-block;
          height: auto;
          max-width: 100%;
        }

HTML :: 

    <div class="our-story-pt-5">
        <div class="container">
            <h4>Our services include</h4>
            <div class="row">
                <ul>
                    <li>
                      <img class="img-responsive" src="http://png.clipart.me/graphics/thumbs/122/a-cute-panda-isolated_122428798.jpg">
                      <p>Creative and Technology Strategy</p>
                    </li>
                    <li>
                      <img class="img-responsive" src="http://png.clipart.me/graphics/thumbs/122/a-cute-panda-isolated_122428798.jpg">
                      <p>Digital Product Development</p>
                    </li>
                    <li>
                      <img class="img-responsive" src="http://png.clipart.me/graphics/thumbs/122/a-cute-panda-isolated_122428798.jpg">
                      <p>Technology Integration</p>
                    </li>
                    <li>
                      <img class="img-responsive" src="http://png.clipart.me/graphics/thumbs/122/a-cute-panda-isolated_122428798.jpg">
                      <p>System Validation</p>
                    </li>
                    <li>
                      <img class="img-responsive" src="http://png.clipart.me/graphics/thumbs/122/a-cute-panda-isolated_122428798.jpg"><br>
                      <p>Sustained Support and Enhancement</p>
                    </li>
                </ul><!-- end ul -->
            </div><!-- end div.row -->
        </div><!-- end div.container -->
    </div><!-- end div.our-story-pt-5 -->

!!!非常简单 使用BOOTSTRAP :: 

    <div class="our-story-pt-5">
        <div class="container">
            <h2 class="text-center">Our services include</h2>
            <div class="row">
                    <div class="col-md-2"><img class="img-responsive" src="http://png.clipart.me/graphics/thumbs/122/a-cute-panda-isolated_122428798.jpg">
                        <p>Creative and Technology Strategy</p>
                    </div>


                    <div class="col-md-2">
                        <img class="img-responsive" src="http://png.clipart.me/graphics/thumbs/122/a-cute-panda-isolated_122428798.jpg">
                        <p>Digital Product Development</p>
                    </div>

                    <div class="col-md-2">
                        <img class="img-responsive" src="http://png.clipart.me/graphics/thumbs/122/a-cute-panda-isolated_122428798.jpg">
                        <p>Technology Integration</p>
                    </div>

                    <div class="col-md-2"> <img class="img-responsive" src="http://png.clipart.me/graphics/thumbs/122/a-cute-panda-isolated_122428798.jpg">
                        <p>System Validation</p>
                    </div>

                    <div class="col-md-2"> <img class="img-responsive" src="http://png.clipart.me/graphics/thumbs/122/a-cute-panda-isolated_122428798.jpg">
                        <p>Sustained Support and Enhancement</p>
                    </div>
            </div>
            <!-- end div.row -->
        </div>
        <!-- end div.container -->
    </div>
    <!-- end div.our-story-pt-5 -->
相关问题
最新问题