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?





      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>



          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>
            <meta charset="utf-8">
            <title>HTML5 Menu</title>
            <!--[if lt IE 9]>
            <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
            * {
            /***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 {
            box-shadow: inset 1px 2px 12px #F00;
            width: 9em;
            /**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;
            nav li:hover {
            <li>Menu 1</li>
            <li>Menu 2</li>
            <li>Menu 3</li>
            <li>Menu 4</li>


            This is what it looks like in Firefox:




            Nancy O.

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

              Awesome.... thank you very much.