3 Replies Latest reply on Dec 11, 2013 11:06 AM by _Alan

    centering divs horizontally

    _Alan Level 1

      I have 4 divs on a fluid grid that I am trying to center inside a a navigation div.  does anyone know how to do that?

       

      Image2.png

      Image4.png

       

      As you can see the 4 divs will be used as navigation buttons.  what I would like to do is get them spread out so they are always center to each other no matter how big the screen is. 

       

      I would like to see:

      space - div -  space - div -  space - div - space - div - space.

        • 1. Re: centering divs horizontally
          Jon Fritz II Adobe Community Professional & MVP

          Put them within a centered div. Something like...

           

          <div class="centered">

          <div id="button1"></div>

          <div id="button2"></div>

          <div id="button3"></div>

          <div id="button4"></div>

          </div>

           

          The CSS would then look like this...

           

          .centered {

               width:500px; /*the width of the 4 buttons + margin + borders */

               margin:0 auto;

          }

          1 person found this helpful
          • 2. Re: centering divs horizontally
            Nancy OShea Adobe Community Professional & MVP

            Use an unordered list for your menu items.  To Illustrate, copy & paste the following code into a new, blank document.  SaveAs test.html and preview in browsers.

             

             

            <!doctype html>
            <html>
            <head>
            <meta charset="utf-8">
            <title>HTML5 Menu</title>
            
            <!--[if lt IE 9]>
            <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
            <![endif]-->
            
            <style>
            * {
            /***add these to your CSS Reset***/
            margin: 0;
            padding: 0;
            -moz-box-sizing: border-box;
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
            }
            
            nav {
            width: 960px;
            /**with width, this is centered**/
            margin:0 auto;
            background: #555;
            color: #FFF;
            font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif;
            }
            
            nav li {
            list-style:none;
            box-shadow: inset 1px 2px 12px #F00;
            display:inline-block;
            width: 9em;
            line-height:6em;
            /**space between items**/
            margin: 10px 4.75%; 
            border: 1px solid #CCC;
            text-align: center;
            font-weight: bold;
            font-size: 16px;
            text-transform: uppercase;
            letter-spacing: 2px;
            cursor:pointer;
            }
            nav li:hover {
            background-color:#FFF; 
            color:#000;
            }
            </style>
            </head>
            
            <body>
            <nav>
            <ul>
            <li>Menu 1</li>
            <li>Menu 2</li>
            <li>Menu 3</li>
            <li>Menu 4</li>
            </ul>
            </nav>
            </body>
            </html>
            

             

            This is what it looks like in Firefox:

            html5menu.jpg

             

             

            Nancy O.

            1 person found this helpful
            • 3. Re: centering divs horizontally
              _Alan Level 1

              Awesome.... thank you very much.