HTML Align Text to Bottom of Button with Images - HTML CSS CSS Form

HTML CSS examples for CSS Form:input button text

  1. HOME
  2. HTML CSS
  3. CSS Form
  4. input button text

Description

HTML Align Text to Bottom of Button with Images

Demo Code

ResultView the demo in separate window 

<html>
 <head> 
  <title>Button-Text-Too-High</title> 
  <meta name="viewport" content="width=device-width, initial-scale=1"> 
  <style id="compiled-css" type="text/css">

.square-button {<!--   ww  w.  j  ava  2 s .  com-->
   width: 198px;
   height: 198px;
   float: left;
   position: relative;
}
.small-img {
   max-width: 128px;
   max-height: 128px;
}
.button-text {
   position: absolute;
   bottom: 5%;
   width: 100%;
   left: 0%;
}


      </style> 
 </head> 
 <body> 
  <button class="square-button"> <img class="small-img" src="https://www.java2s.com/style/demo/Google-Chrome.png"> <br> <span class="button-text">This text is too high</span> </button> 
  <button class="square-button"> <img class="small-img" src="https://www.java2s.com/style/demo/Safari.png"> <br> <span class="button-text">This text is too high</span> </button> 
  <button class="square-button"> <img class="small-img" src="https://www.java2s.com/style/demo/Safari.png"> <br> <span class="button-text">This text is the correct height</span> </button> 
  <button class="square-button"> <img class="small-img" src="https://www.java2s.com/style/demo/Google-Chrome.png"> <br> <span class="button-text">This text is the correct height</span> </button>  
 </body>
</html>

Related Tutorials