"Services + icon (center multiple divs)"
Bootstrap 3.3.0 Snippet by sergioaclo

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div id="aligner"> <center> <figure class="icons"> <figcaption> <center><img src="http://icon-park.com/imagefiles/ribbon_sticker_icon_black2.png" height="100%" alt="sample96"><br><br> <h2>Nonprofits</h2></center> <p>Affordable solutions that helps you better serve and keep in touch with the community and your stakeholders.</p> </figcaption> </figure> <figure class="icons"> <figcaption> <center><img src="http://www.heidelberglehigh.org/wp-content/uploads/2012/11/government-building-icon-md.png" height="100%" alt="sample96"><br><br> <h2>Local Government</h2></center> <p>Maximize trust, transparency and communication between your municipality and residents with a professional and user-friendly platform. </p> </figcaption> </figure> <figure class="icons"> <figcaption> <center><img src="https://cdn1.iconfinder.com/data/icons/social-productivity-line-art-4/128/shopping-cart2-512.png" height="100%" alt="sample96"><br><br> <h2>Online Shopping</h2></center> <p>Optimize your consumers' experience and have them keep coming back. The quality of your website represents the quality of your service and products.</p> </figcaption> </figure> <figure class="icons"> <figcaption> <center><img src="http://files.softicons.com/download/business-icons/free-e-commerce-icons-by-design-bolts/ico/Increase-in-sale-Icon.ico" height="100%" alt="sample96"><br><br> <h2>Small Businesses</h2></center> <p>Don't need an online store? Potential clients, vendors, and partners need to know you. Your website is a great way to tell them.</p> </figcaption> </figure> <figure class="icons"> <figcaption> <center><img src="https://cdn3.iconfinder.com/data/icons/social-icons-24/24/Instagram-128.png" height="100%" alt="sample96"><br><br> <h2>Portfolio</h2></center> <p>Showcase your work in a stunning and clean design that highlights your brilliance. From ultra-dynamic to minimalistic, find the design that matches your masterpieces.</p> </figcaption> </figure> <figure class="icons"> <figcaption> <center><img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcSfXHQZ0ocXuUB76fNIhBCsbEhlULEaG0v8Gj0P7rKOw346dBQ5" height="100%" alt="sample96"><br><br> <h2>Education</h2></center> <p>Extend learning beyond the classroom walls. Assign online quizzes, provide digital flash cards, foster digital collaboration, and more.</p> </figcaption> </figure> <figure class="icons"> <figcaption> <center><img src="https://cdn4.iconfinder.com/data/icons/love-wedding/512/wedding_4-512.png" height="100%" alt="sample96"><br><br> <h2>Weddings</h2></center> <p>Share your most special day with your loved ones from all over the world with a special platform just for you.</p> </figcaption> </figure> <figure class="icons"> <figcaption> <center><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRzVNp5HT8-R93uKycwukIT1qyGqbYxdHO-5u5PFnL33Si6yetcmQ" height="100%" alt="sample96"><br><br> <h2>So Much More...</h2></center> <p>There are many more reasons why you would need a professional designer. Whatever it is, there's a design customized to meet your demand.</p> </figcaption> </figure> </div>
/* ABSOLUTE CENTER & MIDDLE ***insive div***/ #aligner { margin: auto; width: 920px; } .icons { font-family: 'Lato', sans-serif; position: relative; float: left; overflow: hidden; margin: 0px 10px 0px 0px; 1%; min-width: 100px; max-width: 220px; height: 300px; width: 100%; color: #ffffff; text-align: left; font-size: 16px; display:inline-blocks; } .icons img { vertical-align: top; backface-visibility: hidden; height: 50px; } .icons figcaption { position: absolute; top: 0; bottom: 0; left: 0; right: 0; z-index: 1; padding: 10px; } .icons h2, .icons h3, .icons p { margin: 0; } .icons h2, .icons h3 { font-family: 'Slabo 27px', serif; line-height: 1.2em; } .icons h2 { font-size: 1.1em; color: #669900; } .icons h3 { color: #000000; font-size: 1.0em; font-weight: normal; letter-spacing: 1px; } .icons p { border-top: 1px solid rgba(0, 0, 0, 0.2); font-size: 0.8em; margin-top: 0px; padding: 12px 0 15px; line-height: 1.5em; color: #000000; } .icons a { position: absolute; top: 0; bottom: 0; left: 0; right: 0; z-index: 1; }

Related: See More


Questions / Comments: