Align element to bottom of container that uses display: table - HTML CSS CSS Widget

HTML CSS examples for CSS Widget:Table

  1. HOME
  2. HTML CSS
  3. CSS Widget
  4. Table

Description

Align element to bottom of container that uses display: table

Demo Code

ResultView the demo in separate window 

<html lang="en">
 <head> 
  <style>
.cta {<!--from ww  w . j  a  va2s .c  o m-->
   background:Chartreuse;
   display:table-cell;
   width:271px;
   padding:0 0 5em;
   position:relative;
}

.cta-3-col {
   background:gray;
   text-align:center;
   border-spacing:11px;
}

.container {
   display:table;
   width:1001px;
   margin:0 auto;
}

.btn {
   background:blue;
   color:yellow;
   padding:11px;
   position:absolute;
   bottom:0;
   margin-bottom:2em;
   left:51%;
   -webkit-transform:translateX(-51%);
   -moz-transform:translateX(-51%);
   -ms-transform:translateX(-51%);
   -o-transform:translateX(-51%);
   transform:translateX(-51%);
}
</style> 
 </head> 
 <body translate="no"> 
  <div id="cta-3-col" class="cta-3-col"> 
   <div class="container"> 
    <div class="cta"> 
     <figure> 
      <img src="https://www.java2s.com/style/demo/InternetExplorer.png" alt=""> 
      <figcaption> 
       <h2>CTA 1</h2> 
       <p>Lorem ipsum dolor sit amet, consectetur adipisicing </p> 
      </figcaption> 
     </figure> 
     <a href="#" class="btn " role="button"> Follow <i></i> </a> 
    </div> 
    <div class="cta"> 
     <figure> 
      <img src="https://www.java2s.com/style/demo/Google-Chrome.png" alt=""> 
      <figcaption> 
       <h2>CTA 2</h2> 
       <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt magna aliqua sed do edunt ut labore et dolore magna aliqua. </p> 
      </figcaption> 
     </figure> 
     <a href="#" class="btn" role="button"> Partner <i></i> </a> 
    </div> 
    <div class="cta"> 
     <figure> 
      <img src="https://www.java2s.com/style/demo/InternetExplorer.png" alt=""> 
      <figcaption> 
       <h2>CTA 3</h2> 
       <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p> 
      </figcaption> 
     </figure> 
     <a href="#" class="btn" role="button"> Learn <i></i> </a> 
    </div> 
   </div> 
  </div>  
 </body>
</html>

Related Tutorials