Center inline-blocks over multiple lines - HTML CSS CSS Layout

HTML CSS examples for CSS Layout:Layout

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

Description

Center inline-blocks over multiple lines

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">
#world<!--   ww w  . j  a v  a2 s .  c  o  m-->
 {
   width:401px;
   background:Chartreuse;
   padding:11px 0;
}

.container
 {
   display:table;
   margin:11px auto;
   outline:dashed 2px dodgerblue;
   text-align:center;
}

.item
 {
   display:inline-block;
   width:26px;
   margin:7px 5px;
   padding:0px 5px;
   background:mediumseagreen;
   text-align:left;
}

.item.wide
 {
   width:141px;
   background:salmon;
}

.container>div.wide:last-child:nth-child(odd) {
   margin-right:161px;
}
</style> 
 </head> 
 <body> 
  <div id="world">
    Lorem ipsum dolor sit 
   <div class="container"> 
    <div class="item">
      Lor 
    </div> 
    <div class="item">
      Lor 
    </div> 
    <div class="item">
      Lor 
    </div> 
    <div class="item">
      Lor 
    </div> 
    <div class="item">
      Lor 
    </div> 
   </div>Lorem ipsum dolor sit amet, consectetu 
   <div class="container"> 
    <div class="item wide">
      Lor 
    </div> 
    <div class="item wide">
      Lor 
    </div> 
    <div class="item wide">
      Lor 
    </div> 
    <div class="item wide">
      Lor 
    </div> 
    <div class="item wide">
      Lor 
    </div> 
   </div> 
  </div>  
 </body>
</html>

Related Tutorials