Layout 3 images side by side with text above each one, center the three images - HTML CSS CSS Widget

HTML CSS examples for CSS Widget:Image Text

  1. HOME
  2. HTML CSS
  3. CSS Widget
  4. Image Text

Description

Layout 3 images side by side with text above each one, center the three images

Demo Code

ResultView the demo in separate window 

<html>
 <head> 
  <meta name="viewport" content="width=device-width, initial-scale=1"> 
  <style id="compiled-css" type="text/css">
.center<!--   w ww.  j  av  a2 s.  com-->
 {
   margin-left:auto;
   margin-right:auto;
   text-align:center;
   font-size:19px;
}

.centerLeft
 {
   margin-left:34%;
}

.header
 {
   margin-left:auto;
   margin-right:auto;
   text-align:center;
   font-size:37px;
   font-weight:701;
}

.titles
 {
   margin-left:auto;
   margin-right:7px;
   text-align:center;
   font-size:21px;
   font-weight:501;
   vertical-align:middle;
}

.button
 {
   margin-left:auto;
   margin-right:7px;
   text-align:center;
   vertical-align:middle;
}

body
 {
   background-color:Chartreuse;
}

.buttons-group {
   text-align:center;
   margin:41px auto;
   min-width:571px;
}

.button {
   display:inline-block;
   vertical-align:top;
   text-decoration:none;
   color:yellow;
   margin:0 31px;
}

.button span {
   display:block;
   margin-bottom:4px;
   text-align:center;
}

.button img {
   display:block;
}
</style> 
 </head> 
 <body> 
  <div class="header">
    Usefull Tools 
  </div> 
  <div class="buttons-group"> 
   <a href="#" class="button"> <span> Measurement <br> Calculator </span> <img src="https://www.java2s.com/style/demo/Google-Chrome.png"> </a> 
   <a href="#" class="button"> <span> Mortgate <br> Calculator </span> <img src="https://www.java2s.com/style/demo/Firefox.png"> </a> 
   <a href="#" class="button"> <span> Unknown <br> Tool </span> <img src="https://www.java2s.com/style/demo/Safari.png"> </a> 
  </div> 
  <div id="content-area"></div>  
 </body>
</html>

Related Tutorials