Need center align of ul whose
are float left

Question

   <style>
   body{
       margin:0;
       padding:0;
      }
    #module_footerLink li{
        float:left;
        list-style:none;
        margin:0 5px;
    }
    .clear{
        clear:both;
    }
    .wrap{
        border:1px solid #ccc;
        width:900px;
            text-align:center;
    }
    </style>
<body>
<div class="wrap">
    <ul id="module_footerLink">
      <li><a id="id_home" href="home"><span>Home</span></a></li>
      <li><a id="id_the_resort" href="article-AboutUs"><span>The Resort</span></a> </li>
      <li><a id="id_facilities" href="article-facilities"><span>Facilities</span></a></li>
      <li><a id="id_tariff" href="article-tariff"><span>Tariff</span></a></li>
      <li><a id="id_media" href="article-media"><span>Media</span></a></li>
      <li><a id="id_links" href="article-links"><span>Links</span></a></li>
      <li><a id="id_contact_us" href="contact"><span>Contact Us</span></a></li>
       <li class="clear"></li>
    </ul>
    <div class="clear"></div>
    </div>
</body>

Here I want li's in middle of div whose class is wrap. Do any one know how can i do that? I have tried center align but it does not work...............

do you want that li should move to center of the div , are you trying to make a vertical menu — Priyank Patel, Apr 06 '12 at 11:13
no its horizontal menu... all the li must be central align of div with class wrap — sujal, Apr 06 '12 at 11:17
If its a horizontal menu , then you want that all li elements should be next to each other from the left is it, iddnt understand properly what do you mean by center aligned — Priyank Patel, Apr 06 '12 at 11:20
just copy paste my above codes in html file then you will know clearly what i really want to ask — sujal, Apr 06 '12 at 11:21

score 1 · Answer 1 · answered Apr 06 '12 at 11:14

body{
       margin:0;
       padding:0;
      }
    #module_footerLink li{
    display: inline-block;
        list-style:none;
        margin:0 5px;
        /* For IE 7 */
        zoom: 1;
        *display: inline;
    }
    .clear{
        clear:both;
    }
    .wrap{
        border:1px solid #ccc;
        width:900px;
            text-align:center;
    }

Shailender Arora · Accepted Answer · 2012-04-06T12:13:33.350

1

see the updated css :-

<style>
body {
margin: 0;
padding: 0;
}


#module_footerLink {
margin:auto;
width:450px;
}

#module_footerLink li {
float: left;
list-style: none;
margin: 0 5px;
background:red;
}

.clear {
clear: both;
}

.wrap {
border: 1px solid #ccc;
width: 900px;
text-align: center;
background:blue;
}

</style>

i think you looking like this:- http://jsfiddle.net/eHyuZ/2/

UPDATED

Now you can add li's as per your requirement...it will not go anywhere actually your bit of your method was not correct that's why you were facing problems now i have made some changes and made it the navigation in proper way

see the updated link: http://jsfiddle.net/eHyuZ/7/

edited Apr 06 '12 at 12:13

answered Apr 06 '12 at 11:57

Shailender Arora

7,674
2
31
35

if i add more li's? It will go down... these li will be dynamically placed later – sujal Apr 06 '12 at 12:03
you don't need to use the floats in your li because it will come randomly through display:inline; in li....and now you can add more li's in your UL list with div class wrap... – Shailender Arora Apr 06 '12 at 12:20
i have just figure out the problem and saw ur answer thanks anyway – sujal Apr 06 '12 at 12:22

score 0 · Answer 3 · answered Apr 06 '12 at 11:12

0

you must use margin:0 auto;

.wrap{
    border:1px solid #ccc;
    width:900px;
    margin:0 auto;
    text-align:center;
}

http://www.w3schools.com/css/css_align.asp

answered Apr 06 '12 at 11:12

Masood S

13
6

you must set width for ul and set margin:0 auto for ul, this work when the number of li's and th total width is fixed otherwise you must use script to calculate the li's width then set to ul. – Masood S Apr 06 '12 at 11:29

score 0 · Answer 4 · edited May 23 '17 at 12:11

0

EDITED by comment

Try add

#module_footerLink {
display:inline-block;
/*IE7*/
zoom:1;
*display:inline;
}

http://jsfiddle.net/DEmTh/1/

But in IE7 its not working

edited May 23 '17 at 12:11

Community

1
1

answered Apr 06 '12 at 11:15

kubedan

616
2
7
26

If you need to support IE7 I would use a
– gitaarik Apr 06 '12 at 11:22
Try http://stackoverflow.com/a/6545033/1102223 #module_footerLink { display:inline-block; *display:inline; zoom:1; } – kubedan Apr 06 '12 at 11:29

Need center align of ul whose are float left

4 Answers4

Need center align of ul whose
are float left