0

How can I center this ul tag ?

I tried every thing I know but nothing works (http://jsfiddle.net/alhasen/dmW5F/).

Note: View this in fullscreen.

See this ul list at the center of the fieldset.

 <ul id="progressbar">
   <li class="active">First step</li>
   <li>Second step</li>
   <li>Third step</li>
 </ul>
Jo E.
  • 7,822
  • 14
  • 58
  • 94
AlhasanIQ
  • 183
  • 2
  • 9
  • 1
    possible duplicate of [How do I center align horizontal
      menu?](http://stackoverflow.com/questions/2865380/how-do-i-center-align-horizontal-ul-menu)
     – Stratus3D Apr 21 '14 at 16:38
  • you could use `display:inline-block;` on `#progressbar` and use `display:block` for all floated child li's this will center it but you will have to adjust the styling – Dev Man Apr 21 '14 at 16:50

2 Answers2

2

Not sure if this is what you wanted to see but take a look: http://jsfiddle.net/dmW5F/1/

Anyway what I did was

remove the ul {width:1000px} resulting to:

    ul {
        margin: auto auto;
        text-align: center;
        position: relative;
    }

and changed #progressbar li to:

    #progressbar li {
        list-style-type:none;
        color:#fff;
        text-transform:uppercase;
        font-size:9px;
        width:30%;
        padding-top:10px;
        display:inline-block;
        position:relative
    }

I removed the float:left, added display:inline-block, changed width to width:30%

Tell me if you have any questions. Cheers!

Jo E.
  • 7,822
  • 14
  • 58
  • 94
  • 1 more question , the animation on the fieldset changing (when click the next and prev buttons) can i remove it ? :( – AlhasanIQ Apr 21 '14 at 17:31
  • I dont see any visible next and prev buttons? But I do see them inside `fieldset#frame2` – Jo E. Apr 21 '14 at 17:35
  • if your using a plugin and the animations are made by the plugin then I would suggest you take a look at the documentation of the plugin (if there is an existing one). The developer might have added a no-animation feature that you just need to implement. – Jo E. Apr 21 '14 at 17:49
  • its not a plugin , i made it according to this tutorial http://thecodeplayer.com/walkthrough/jquery-multi-step-form-with-progress-bar – AlhasanIQ Apr 21 '14 at 17:55
  • i dont want to remove the whole animation , just the scaling – AlhasanIQ Apr 21 '14 at 18:11
0

HTML:

<div class="centered">
    <ul id="progressbar">
         <li class="active">First step</li>
         <li>Second step</li>
         <li>Third step</li>
     </ul>
</div>

CSS:

.centered {
    width: 100%;
    margin: 0;
}
#progressbar {
    max-width: 40%;
    margin: 0 auto;
}
#progressbar li {
    width: 40%;
    margin: 0 30%;
}

See the jsFiddle

toesslab
  • 5,092
  • 8
  • 43
  • 62