Centering and spreading buttons out across top of page

[cliftonbazaar]

I have seven buttons across a page which I want centered and evenly spaced; I could do this via a table but wish to move away from tables and use css.

 

At the moment I have

style='text-align:center'

but this bunches all the buttons together in the center of the page; if I use

style='text-align:justify'

then the buttons are to the left.

[fortnox007]

first of all use an external stylesheet, inline css is confusing hard to maintain and ugly.

 

So what you could do is make a unordered list and let the list-items be shown inline.

like this:

<ul id="menu">
              <li><a href=""><span>Your text here</span></a></li>
              <li><a href=""><span>Your text here</span></a></li>
              <li><a href=""><span>Your text here</span></a></li>
              <li><a href=""><span>Your text here</span></a></li>
              <li><a href=""><span>Your text here</span></a></li>
   </ul>

 

 

Than in your external stylesheet you add this:

#menu{
    margin:0 auto; /* center for default browsers */
    text-align: center; /* IE 5 /6 needs this */
}
#menu li{
    display:inline; /* to make the list horizontal */
    padding:30px; /*some padding */
    text-align: left;  /* rest text align to left  for list items*/
}

 

Hope this helps!

cheers!

 

P.s. you might want to add display: inline-block for the  a elements to give them some body

[raknjak]

If I recall correctly the example above needs a fixed height on the containing div to work - I might be wrong here.

 

Indeed! inline styles are not only confusing, they are slower then pre-loaded styles.

[fortnox007]

If I recall correctly the example above needs a fixed height on the containing div to work - I might be wrong here.

Hmm i am not sure about that. It works perfect at my place.

 

i also heared that people that use inline styles, get struck by lightning twice as often, so that's another reason to separate markup and style.

[cliftonbazaar]

i also heared that people that use inline styles, get struck by lightning twice as often, so that's another reason to separate markup and style.

Considering that there is a thunderstorm in the background at my place (not joking!) I won't take the chance! 

 

Have done what you have said (except I wrote padding:3% and it looks great  :thumb-up:

 

James

[raknjak]

If I recall correctly the example above needs a fixed height on the containing div to work - I might be wrong here.

Hmm i am not sure about that. It works perfect at my place.

 

i also heared that people that use inline styles, get struck by lightning twice as often, so that's another reason to separate markup and style.

 

you're right, it doesn't need the width because of margin: 0 auto on the ul itself so it does not need a containing div.

I've been using inline on this totally confusing and terrible spaghetti code project ... bring on the lightning, please.

[fortnox007]

i also heared that people that use inline styles, get struck by lightning twice as often, so that's another reason to separate markup and style.

Considering that there is a thunderstorm in the background at my place (not joking!) I won't take the chance! 

 

Have done what you have said (except I wrote padding:3% and it looks great  :thumb-up:

 

James

 

If your working with percentages, make sure you have a parent with a positioning other than static with a width otherwise the body width is taken. (you could use em too)