Html 如何将图像叠加到文本上？_Html_Css_Twitter Bootstrap

Html 如何将图像叠加到文本上？

html css twitter-bootstrap

Html 如何将图像叠加到文本上？,html,css,twitter-bootstrap,Html,Css,Twitter Bootstrap,我正试图将图像水平排列，并直接放在这些图像下面。我想应用文本，我该如何做呢这是我在最后一次尝试中尝试过的，到目前为止……没有运气我也在使用bootstrap，并在RubyonRails应用程序中进行此样式设置，如果这样有帮助的话。谢谢大家! HTML 这个怎么样？使用Bootstrap列类和几行CSS将文本居中，我相信结果就是您想要的。当然，如果确实希望最后两个框居中，可以使用偏移类。但这要由你来决定 HTML: 这个怎么样？使用Bootstrap列类和几行CSS将文本居中，我相信结果就是

我正试图将图像水平排列，并直接放在这些图像下面。我想应用文本，我该如何做呢

这是我在最后一次尝试中尝试过的，到目前为止……没有运气

我也在使用bootstrap，并在RubyonRails应用程序中进行此样式设置，如果这样有帮助的话。谢谢大家!

HTML

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

HTML:

这里有几种方法可以实现这一点，具体取决于您是否要使用网格。如果没有，那么只需在

li

上使用display:inline块，并可能给

ul

一个类（尽管不是必需的）

请参见代码段中的示例

.our-story-pt-5 ul.img-container li{
显示：内联块；
}
.our-story-pt-5 ul.img-集装箱img{
边缘底部：12px；
}
.our-story-pt-5 ul.img-container{
列表样式：无；
填充：0px；
}
.our-story-pt-5 ul.img-container li{
列表样式类型：无；
颜色：#284179；
线高：40px；
字体大小：22px；
填充：0px 5px；
p{
字号：500；
字体系列：“Gotham Bold”；
线高：23px；
字体大小：16px；
边缘底部：0px；
字母间距：0px；
颜色：#2c4d82；
}
}
/**网格**/
.我们的故事-pt-6{
颜色：#284179；
线高：40px；
字体大小：22px；
填充：0px 5px；
p{
字号：500；
字体系列：“Gotham Bold”；
线高：23px；
字体大小：16px；
边缘底部：0px；
字母间距：0px；
颜色：#2c4d82；
}
}
.我们的故事-pt-6 img{
保证金：0自动；
}


列表
我们的服务包括


创新与技术战略


数字产品开发


技术集成


系统验证


持续支持和加强



网格1
我们的服务包括
创新与技术战略
数字产品开发
技术集成
系统验证
持续支持和加强

网格2
我们的服务包括
创新与技术战略
数字产品开发
技术集成
系统验证
持续支持和加强

根据您是否要使用网格，这里提供了几种方法。如果没有，那么只需在

li

上使用display:inline块，并可能给

ul

一个类（尽管不是必需的）

请参见代码段中的示例

.our-story-pt-5 ul.img-container li{
显示：内联块；
}
.our-story-pt-5 ul.img-集装箱img{
边缘底部：12px；
}
.our-story-pt-5 ul.img-container{
列表样式：无；
填充：0px；
}
.our-story-pt-5 ul.img-container li{
列表样式类型：无；
颜色：#284179；
线高：40px；
字体大小：22px；
填充：0px 5px；
p{
字号：500；
字体系列：“Gotham Bold”；
线高：23px；
字体大小：16px；
边缘底部：0px；
字母间距：0px；
颜色：#2c4d82；
}
}
/**网格**/
.我们的故事-pt-6{
颜色：#284179；
线高：40px；
字体大小：22px；
填充：0px 5px；
p{
字号：500；
字体系列：“Gotham Bold”；
线高：23px；
字体大小：16px；
边缘底部：0px；
字母间距：0px；
颜色：#2c4d82；
}
}
.我们的故事-pt-6 img{
保证金：0自动；
}


列表
我们的服务包括


创新与技术战略


数字产品开发


技术集成


系统验证


持续支持和加强



网格1
我们的服务包括
创新与技术战略
数字产品开发
技术集成
系统验证
持续支持和加强

网格2
我们的服务包括
创新与技术战略
数字产品开发
技术集成
系统验证
持续支持和加强

修改代码上的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 -->


我们的服务包括


创新与技术战略


<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 -->

.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%;
}

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

    <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 -->       

    <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 -->