Align multiple divs to center, without centering the text inside each div tag - HTML CSS CSS Layout

HTML CSS examples for CSS Layout:Text

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

Description

Align multiple divs to center, without centering the text inside each div tag

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 {<!--  w  ww  .j  av a2  s  .co m-->
   height:201px;
   background:Chartreuse;
}

.footer-block {
   width:26%;
   height:181px;
   padding:11px;
   float:left;
   box-sizing:border-box;
   margin-top:11px;
   border:2px solid yellow;
}

.footer-block a {
   display:block;
   color:blue;
   font-size:21px;
}
</style> 
 </head> 
 <body> 
  <footer> 
   <div class="footer-block"> 
    <a href="#">1</a> 
    <a href="#">2</a> 
    <a href="#">3</a> 
    <a href="#">4</a> 
   </div> 
   <div class="footer-block"> 
    <a href="#">1</a> 
    <a href="#">2</a> 
    <a href="#">3</a> 
    <a href="#">4</a> 
   </div> 
   <div class="footer-block"> 
    <a href="#">1</a> 
    <a href="#">2</a> 
    <a href="#">3</a> 
    <a href="#">4</a> 
   </div> 
   <div class="footer-block"> 
    <a href="#">1</a> 
    <a href="#">2</a> 
    <a href="#">3</a> 
    <a href="#">4</a> 
   </div> 
  </footer>  
 </body>
</html>

Related Tutorials