aligning contents of div to center - HTML CSS CSS Widget

HTML CSS examples for CSS Widget:Div

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

Description

aligning contents of div to center

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <style type="text/css">
.allImagesSlide<!--   w  w w  . j av  a  2 s . c o m-->
{
   margin-top: 8px;
   width: 600px;
   height: 200px;
   margin-left: 2px;
   border-radius: 5px;
   box-shadow: rgb(113, 113, 207) 0px 0px 5px;
   background: white;
   padding: 5px;
   clear: both;
}
.slideToPrev
{
   background: rgba(223, 228, 228, 0.49);
   height: 100%;
   width: 6%;
   float: left;
   border-radius: 5px;
}
.middleSlideContents
{
   width: 86%;
   height: 100%;
   border-radius: 5px;
   float: left;
   margin-left: 7px;
   text-align:center;
   display:table;
   table-layout:fixed;
}
.slideToNext
{
   background: rgba(223, 228, 228, 0.49);
   height: 100%;
   width: 6%;
   float: right;
   border-radius: 5px;
}
.image
{
   border-radius: 5px;
   display:inline-block;
   margin-right:5px;
   display:table-cell;
   vertical-align:middle;
}
.image img
{
   cursor:pointer;
   width:150px;
   height:150px;
}

      </style> 
   </head> 
   <body> 
      <div class="allImagesSlide"> 
         <div class="slideToPrev"></div> 
         <div class="middleSlideContents"> 
            <div class="image"> 
               <img src="https://www.java2s.com/style/demo/Firefox.png" alt="alt message"> 
            </div> 
            <div class="image"> 
               <img src="http://java2s.com/resources/d.png" alt="alt message"> 
            </div> 
            <div class="image"> 
               <img src="http://java2s.com/resources/f.png" alt="alt message"> 
            </div> 
         </div> 
         <div class="slideToNext"></div> 
      </div>  
   </body>
</html>

Related Tutorials