1. 首頁
  2. 問答
  3. 如何在文本上堆疊圖像？

如何在文本上堆疊圖像？

2015-11-02 101 views
1

我想排列圖像水平和直接在這些圖像下我想申請文本，我會怎麼做呢？如何在文本上堆疊圖像？

這就是我在上次嘗試中嘗試過的，至今......沒有運氣！

我也使用引導程序，並在軌道應用程序的紅寶石做這個樣式，如果有幫助。謝謝！

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

來源

2015-11-02 George Miller

+0

爲什麼你不使用Bootstrap自己的「col-xx-xx」類來將你的內容完美對齊？這將比使用UL> LI更好，我相信這並不適合結構 – IndieRok

+0

我嘗試使用小列對齊內容，但仍然無法獲取圖像下的所有文本@IndieRok –

回答

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

來源

2015-11-02 20:37:11 IndieRok

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>

來源

2015-11-02 20:39:09 vanburen

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

!!!很簡單 使用自助::

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

來源

2015-11-02 21:27:56

相關問題

 相關問題