Aligning divs underneath each other with inner div aligned horizontally - HTML CSS CSS Layout

HTML CSS examples for CSS Layout:Div Align

  1. HOME
  2. HTML CSS
  3. CSS Layout
  4. Div Align

Description

Aligning divs underneath each other with inner div aligned horizontally

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">
.container {<!--from   www.ja v  a  2 s .c om-->
   width:100%;
   position:relative;
}

.classic {
   display:block;
   position:relative;
   margin-left:auto;
   margin-right:auto;
   background-position:center center;
   background-image:url('http://www.java2s.com/style/demo/Google-Chrome.png');
   background-size:contain;
   background-repeat:no-repeat;
}

.classic-img {
}
.classic-img img {
}
.top-menu {
   position:relative;
   width:100%;
   height:51px;
   background-color:Chartreuse;
}

.top-menu-buttons {
   position:absolute;
   margin-left:auto;
   margin-right:auto;
   bottom:0;
   left:0;
   right:0;
   width:51%;
   text-align:center;
}

.top-menu-buttons .button {
   display:inline-block;
   vertical-align:middle;
   font-size:26px;
   color:yellow;
}

.top-menu-buttons span {
   display:inline-block;
   vertical-align:middle;
   font-size:26px;
   color:blue;
}

.bottom-menu {
   position:relative;
   width:100%;
   height:51px;
   background-color:pink;
}

.bottom-menu-buttons {
   position:absolute;
   margin-left:auto;
   margin-right:auto;
   bottom:0;
   left:0;
   right:0;
   width:81%;
   text-align:center;
}

.bottom-menu-buttons .button {
   display:inline-block;
   vertical-align:middle;
   font-size:36px;
   color:WhiteSmoke;
   padding-left:11px;
   padding-right:11px;
}
</style> 
 </head> 
 <body> 
  <div id="container" class="container"> 
   <div id="menu-top"> 
    <div class="top-menu"> 
     <div class="top-menu-buttons"> 
      <button class="button button-icon">-</button> 
      <span>20</span> 
      <button class="button button-icon">+</button> 
     </div> 
    </div> 
   </div> 
   <div id="classic" class="classic"> 
    <div id="classic-img" class="classic-img"> 
     <img src="https://www.java2s.com/style/demo/Safari.png"> 
    </div> 
   </div> 
   <div id="menu-bottom"> 
    <div class="bottom-menu"> 
     <div class="bottom-menu-buttons"> 
      <button class="button button-icon">1</button> 
      <button class="button button-icon">2</button> 
      <button class="button button-icon">3</button> 
      <button class="button button-icon">4</button> 
      <button class="button button-icon">5</button> 
     </div> 
    </div> 
   </div> 
  </div>  
 </body>
</html>

Related Tutorials