how to center UL in my page?

Question

we have a problem of making the ul-ed blocks of buttons on the top of the page ideal to the center.

here is the link.

nick.georates.net/selectcountry.html

can you give a hint how in the css adjust so that the buttons will be in the middle for any resolution of the page????

thanks beforehand

the ul with the class = "shortcut-buttons-set" inherits a padding-left:40px; try to overwrite that in the "shortcut-buttons-set" class — thedev, Nov 19 '10 at 13:08
@thedev: This is the right answer, please post it as an answer and I will vote you up. @DR.GEWA: The element from which the padding is inherited is #main-content in style.css line 236. — Bazzz, Nov 19 '10 at 15:38
@DR GEWA glad to be of assistance... good luck with your project ;) — thedev, Nov 19 '10 at 16:47

score 2 · Accepted Answer · answered Nov 19 '10 at 16:44

2

the ul with the class = "shortcut-buttons-set" inherits a padding-left:40px; try to overwrite that in the "shortcut-buttons-set" class

answered Nov 19 '10 at 16:44

thedev

2,816
8
34
47

Voted up, as said in comment of the question. :) – Bazzz Nov 20 '10 at 07:03
@Bazzz 6 months later accepted as the right answer ... that's fast ... good thing the apocalypse didn't come today – thedev May 22 '11 at 11:39

score 0 · Answer 2 · answered Nov 19 '10 at 13:06

0

As you have five <li> you can set their width as 20%, whith margin:auto links will appear center.

li {
    margin:0;
    padding:0;
    width:20%;
    float:left;
}
a {
    width:103px;
    margin:auto;
}

answered Nov 19 '10 at 13:06

MatTheCat

18,071
6
54
69

actually I don't want li-s to be with percent as I think for big resolutions the buttons will be ugly big... or? – MR.GEWA Nov 19 '10 at 13:34
Buttons are only tags,
width won't affect them. You will just have more space between them.

MatTheCat

Nov 19 '10 at 13:36

Yi Jiang · Answer 3 · 2010-11-19T13:14:18.830

0

Give the ul element a width - in this case it would be 600px, as you have 5 buttons * 105px width and 15px margin for each button. Removing the padding set on the ul and the left and right values set on the li, and give the ul element this style:

.shortcut-buttons-set {
    margin: 0 auto;
    padding: 0;
    width: 600px;
}

ul.shortcut-buttons-set li {
    float: left;
    font-weight: bold;
    margin: 0 15px 0 0;
    padding: 0 !important;
    text-align: center;
}

Additionally, you'll want to use :last-child to remove the last 15px margin, so that the buttons are perfectly aligned.

.shortcut-buttons-set li:last-child {
    margin: 0;
}

Taking this into account, the width for the ul should now be 585px.

edited Nov 19 '10 at 13:14

answered Nov 19 '10 at 13:06

Yi Jiang

49,435
16
136
136

1

The :last-child pseudo-class is not compatible will all browser as detailed in this [post](http://stackoverflow.com/questions/1293369/using-last-child-in-css) – yvoyer Nov 19 '10 at 13:31
AS usual, if you need as much support as possible you can switch `margin-right` to `margin-left` and use `:first-child`. Of course that *still* won't work with IE6, so you can always add a class instead. – Yi Jiang Nov 19 '10 at 13:33

score 0 · Answer 4 · answered Nov 19 '10 at 13:08

Enclose your UL element inside a DIV with a width of 100%

<div style="width: 100%;">
    <ul class="shortcut-buttons-set">
        <li></li>
        <li></li>
        <li></li>
        <li></li>       
     </ul>
</div>

Apply this CSS to UL

.shortcut-buttons-set{
display:inline-block;
list-style:none outside none;
margin:0 auto;
padding:0;
}

and remove the property left:25% and right:25% to your LI element.

ul.shortcut-buttons-set li{
background:none repeat scroll 0 50% transparent;
float:left;
font-weight:bold;
***left:25%;***
margin:0 15px 0 0;
padding:0 !important;
position:relative;
***right:25%;***
text-align:center;
}

Why width:100% for a block element? – MatTheCat Nov 19 '10 at 13:36 — MatTheCat, Nov 19 '10 at 13:36

how to center UL in my page?

4 Answers4