Two column layout with text vertically centered - HTML CSS CSS Layout

HTML CSS examples for CSS Layout:2 Column

  1. HOME
  2. HTML CSS
  3. CSS Layout
  4. 2 Column

Description

Two column layout with text vertically centered

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

footer {<!--from w  ww.  j  ava2 s . c  om-->
   background: #1c1d1d;
   padding: 10px 5px;
   height: 100%;
   min-height: 100px;
   position: relative;
   clear: both;
}
.wrapper {
   position: absolute;
   top: 0;
   bottom: 0;
   left: 5px;
   right: 5px;
}
.wrapper:before {
   content: '';
   display: inline-block;
   vertical-align: middle;
   height: 100%;
}
.column {
   display: inline-block;
   width: 48%;
}
a.cta {
   display: inline-block;
   background-color: blue;
   color: white;
   font-size: 1rem;
   line-height: 1rem;
   padding: 0;
   border-radius: 6px;
   text-decoration: none;
}
span.text {
   text-transform: uppercase;
   letter-spacing: 0.065em;
   padding: 10px 10px;
}
span.arrow {
   display: inline-block;
   border-left: 1px solid black;
   padding: 10px 10px;
   font-size: 1rem;
   line-height: 1rem;
   font-weight: normal;
}
ul {
   margin: 0;
   vertical-align: middle;
   line-height: 13px;
   display: inline-block;
   vertical-align: middle;
}
li {
   list-style: none;
   display: block;
   text-transform: uppercase;
   border-right: 1px solid blue;
   padding: 0 20px;
   font-size: 13px;
   line-height: 13px;
}
li:last-child {
   border: none;
   padding-right: 0;
}
a {
   color: #fff;
   text-decoration: none;
}


      </style> 
 </head> 
 <body> 
  <footer> 
   <div class="wrapper"> 
    <div class="column"> 
     <a class="cta" href="#"> <span class="text"> Button </span> <span class="arrow"> &gt; </span> </a> 
    </div> 
    <div class="column"> 
     <ul> 
      <li> <a href="#">Link 1</a> </li> 
      <li> <a href="#">Link 2</a> </li> 
      <li> <a href="#">Link 3</a> </li> 
     </ul> 
    </div> 
   </div> 
  </footer>  
 </body>
</html>

Related Tutorials